当用户滚过某个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'偏移量与'scroll'位置匹配)时,您可以关闭动画.

此外,(基于稍微不同的偏移(例如div偏移-600px),如果用户向上滚动页面,通过动画,您可以"重置"动画.虽然,这可能会让用户烦恼并且比工作更多利益......

抵消:http://api.jquery.com/offset/

scrollTop:http://api.jquery.com/scrolltop/

Answer 2

Skrollr允许您根据滚动条位置为任何元素的任何CSS属性设置动画(如果您知道div的位置/偏移量).

例如,您可以更改div的背景颜色,当滚动条位于顶部时以红色开始,当div的顶部位于窗口顶部时以绿色结束.

var s = skrollr.init();

<script src="http://prinzhorn.github.io/skrollr/dist/skrollr.min.js"></script>

<div style="height: 100px"></div>
<div data-0p="background-color: red;" data-100="background-color: !green;" style="height: 200px;background-color: red;" >
</div>