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（）函数，当达到偏移量时（即＆＃39; div＆＃39;偏移量匹配＆＃39;滚动＆＃39;位置），您可以关闭动画。< / p>

此外，（基于稍微不同的偏移（例如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>

Answer 3

我建议您查看https://github.com/customd/jquery-visible

这是一个jQuery插件，它允许我们快速检查元素是否在浏览器可视视口中，而不管滚动位置如何。如果用户可以看到此元素，则该函数将返回true。这样，您实际上可以找到用户是否已使用不同元素滚动并应用您想要的动画。

然后你可以使用你当前的代码来获得你想要的数字滚动多少等等。

Answer 4

我可以看到jquery的动画是如何导致问题的，每次滚动动画都会停止..我决定采取另一种方法。

请参阅此处的示例：http://jsfiddle.net/xgmbf5ro/3/

$(window).scroll(function() {
    var offset = $(self).offset();
    var distance = parseInt(offset.top) - parseInt($(window).scrollTop());
    var l = (distance / parseInt($(self).outerHeight())) * 100;

    if (l > 0) {
        l = "0";
    }

    $(self).css("left", l+"%");
});

当我滚动页面时，我会发现我们已经在我们动画的DOM元素中垂直滚动了多远。然后我取该值并替换该元素的left属性。不再是.animate()，没有更多的故障！

我已将其设为jQuery插件，因此您可以根据需要将其应用于尽可能多的div：$("#myDiv").slideOut();。

此解决方案的唯一问题是浏览器没有平滑滚动。

Answer 5

我建议你使用wow.js

https://github.com/matthieua/WOW

它非常易于使用，这里是演示页面。 http://mynameismatthieu.com/WOW/

Answer 6

当用户在页面上滚动时，有时您希望在页面顶部显示一个栏，当用户向上滚动时，它应该返回到原始位置。当您想要添加说明共享栏，搜索栏等并使其始终可见时，这尤其有用，即使用户位于页面底部也是如此。

请尝试这样

https://www.virendrachandak.com/techtalk/make-a-div-stick-to-top-when-scrolled-to/

当用户滚过某个div时如何更改CSS

6 个答案: