检测滚动条何时到达div的顶部?

时间:2012-04-27 03:01:38

标签: javascript jquery scroll jquery-animate

我正试图在#container div的滚动事件上为boxShadow设置动画。一切正常,除了我无法找到一个很好的方法来检测滚动条到达顶部,以便boxShadows可以动画出来。到目前为止,这是我的代码

   $('#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");
            }
        }
    );

我添加了一个演示。滚动动画的初始效果非常好,但是当条形图返回到顶部时,它们会在第二个动画开始之前延迟很长时间。http://jsfiddle.net/JYqC3/14/

1 个答案:

答案 0 :(得分:14)

希望这有帮助

使用 .scrollTop

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

DEMO

编辑:更好的动画添加到演示