【问题标题】:Detect when scrollbar reaches top of div?检测滚动条何时到达div的顶部?
【发布时间】:2012-05-07 19:44:44
【问题描述】:

我正在尝试在我的#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/

【问题讨论】:

    标签: javascript jquery scroll jquery-animate


    【解决方案1】:

    希望对你有帮助

    使用.scrollTop

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

    DEMO

    编辑:在演示中添加了更好的动画

    【讨论】:

    • 感谢您的回答。这基本上就是我所写的,如果我要在我的 if 语句中放置一个警报,它会在栏到达顶部时立即触发。出于某种原因,动画在 if 语句中启动有很长的延迟。
    • 在这里我编辑了 jsfiddle。向下滚动并看到阴影立即出现,但是当您滚动到顶部时,您必须等待 5 秒钟才能消失。我正在使用一个 jquery 插件,它包含在 html jsfiddle.net/JYqC3/12 的顶部
    • 更新了我的demo,它绝对不是最好的解决方案,我没有时间,所以做了一个临时修复
    • 非常感谢,但如果用户快速滚动,它就无法捕捉到,但您可能已经知道了。
    • 您知道为什么当您单击栏并拖动以滚动时,这些实现中的任何一个都不起作用吗?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2015-07-29
    • 2015-11-11
    • 2023-03-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多