JQuery scrollTop always returns 0

Question

I have the following HTML:

<div id="header"> </div> <div id="content"> <div id="test"></div> <div style="height:1280px;"></div> </div> 

JQuery

 $(document).ready(function() { $('#content').scroll(function(){ console.log($('#test').scrollTop()); if($('#test').scrollTop()<=100) { $('#header').addClass('shadow'); } else { $('#header').removeClass('shadow'); } }); }); 

Here's the script: http://jsfiddle.net/sZ89D/

In it, I have a fixed title that will have a class applied to it when the user scrolls a div with the test id less than the height (100 pixels). The class is applied, but not deleted again, and the console registers the code, which turns out that scrollTop is always 0 ...

Any ideas what the problem is? Thanks

Answer 1

So, do you want the shadow to appear when scrolling down and disappear when scrolling back up?

 $(document).ready(function(){ $('#content').scroll(function(){ console.log($('#content').scrollTop()); if($('#content').scrollTop()<=100) { $('#header').removeClass('shadow'); } else { $('#header').addClass('shadow'); } }); }); 

Change $ ('# test'). scrollTop () for $ ('# content'). scrollTop () and cancel the function of adding / removing a class.

Answer 2

Changing #test to #content seems like a trick:

 if($('#content').scrollTop()<=100) 

Answer 3

It works:

 if($('#content').scrollTop()<=100) { $('#header').removeClass('shadow'); } else { $('#header').addClass('shadow'); } 

Based on @MassivePenguin comments