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 a fiddle: http://jsfiddle.net/sZ89D/

In it I have a fixed header that will have a class applied to it when the user scrolls a div with an id of test less than it’s height (100px). The class is applied but doesn’t removed again and console logging the code it turns out that scrollTop is always 0…

Any ideas what the issue is? Thanks

Answer 1

So you want the shadow to appear when you scroll down, and disappear when you scroll back to the top?

$(document).ready(function(){

            $('#content').scroll(function(){

                console.log($('#content').scrollTop());

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

        });

Swap $(‘#test’).scrollTop() for $(‘#content’).scrollTop(), and reverse the add/remove class functions.