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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/10344211/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-24 00:57:59  来源:igfitidea点击:

Detect when scrollbar reaches top of div?

javascriptjqueryscrolljquery-animate

提问by Wilfred

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 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");
            }
        }
    );

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/

我添加了一个演示。滚动动画的初始效果完美,但是当栏返回顶部时,在第二个动画开始之前会有相当长的延迟。http://jsfiddle.net/JYqC3/14/

回答by Dhiraj

Hope this helps

希望这可以帮助

Used .scrollTop

使用.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

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