javascript - 如何在用户滚动经过某个 div 时更改 CSS

Question

我正在尝试实现一个滚动功能，它根据用户滚动的位置移动元素，这段代码目前有效并且确实移动了元素。

问题是我想要一个不同函数的列表，当你根据它的 id 或类滚动经过某个 div 时，它会移动特定元素。

我想如果我改变 $("#pagelight2").scrollTop() 它会起作用，但没有帮助

任何指导将不胜感激

谢谢

更新后的代码有效，但每当我向上滚动动画停止移动时，它确实会出现故障 - 有人知道更有效的方法来让它工作吗？

    var $scrollingDiv = $(".Page3-PeopleWalkingDown");

    var p = $("#pagedark3");

    var offset = p.offset();

    var top = offset.top;

    $(window).scroll(function() {

                var scrollval = $(window).scrollTop() - top;

                if ($(window).scrollTop() > 1400) {
                    $scrollingDiv
                        .stop()
                        .animate({
                            "left": "-" + (scrollval) + "px"
                        });

                } else


                {

                    $scrollingDiv
                        .stop()
                        .animate({
                            "left": +(0) + "px"
                        });
                }

Answer 1

您需要做的是计算每个特定 DIV 相对于页面顶部或可滚动区域的偏移高度。

然后，使用您的 .scroll() 函数，当达到偏移量时(即“div”偏移量与“滚动”位置匹配)，您可以关闭动画。

此外，(基于稍微不同的偏移量(例如 div 偏移量 -600px)，如果用户向上滚动页面，超过动画，您可以“重置”动画。虽然，这可能会让用户感到厌烦，并且功大于利……

偏移量:http://api.jquery.com/offset/

滚动条:http://api.jquery.com/scrolltop/