html - inserting a javascript to change div opacity based on scroll position -

first, know has been covered multiple times, can't figure out how insert script properly...

i want div change opacity when scroll getting down...

what i'm having now: fiddle

$(window).scroll(function() {     var st = $(this).scrolltop();     $('#liners').each(function(index) {         if (($(this).offset().top-st) < 50) {             $(this).css({                 'opacity': (0 + (st / $(this).offset().top))             });         } else {             $(this).css({'opacity': 0.1});         }     }) }); 

it doesn't work @ all, not near to.. need don't know if i'm writing correctly too!

thanks answers , if need more infos me ask!

next time, please test fiddle (you've put js+css in wrong boxes , didn't include jquery).

here solution.

i've change css definition make easier test (i used smaller height you). other that, here relevant js code:

$('div#liners').scroll(function() {     var st = $(this).scrolltop();     var h = this.scrollheight;     $(this).css({         'opacity': 1 - st / h     }); }); 

you need capture div's scroll, size of content (h in code) , scroll position.

edit: occurred me want depend on window scroll, not div content (i don't see purpose that, didn't think of before). in case, adapt code capture window's scroll, did in original attempt.