Detect when scrollbar reaches top of div?

25,541

Hope this helps

Used .scrollTop

$('#my_div').scroll(function() {
    var pos = $('#my_div').scrollTop();
    if (pos == 0) {
        alert('top of the div');
    }
});

DEMO

EDIT: better animation added to demo

Share:
25,541
Wilfred
Author by

Wilfred

Updated on July 05, 2022

Comments

  • Wilfred
    Wilfred almost 2 years

    I'm trying to animate a boxShadow on the scroll event of my #container div. Everything works except I can't figure out a good way to detect the scrollbar reaching the top so that the boxShadows can animate out. This is my code so far

       $('#container').scroll(
            function()
            {
                $('#white').animate(
                {
                    boxShadow: "0 8px 8px -7px #696868"
                },
                "fast"); 
                if ($('#container').scrollTop() == 0)
                {
                    $('#white').animate(
                    {
                        boxShadow: "0 0 0 0 #696868"
                    },
                    "fast");
                }
            }
        );
    

    I've added a demo. The initial on scroll animate works perfectly, but when the bar returns to top their is a rather long delay before the second animation kicks in. http://jsfiddle.net/JYqC3/14/