Question

我正在尝试创建一个固定的顶部导航，当您向下滚动页面时，菜单会发生变化。当您滚过某个y点时，菜单将在您向下滚动页面时滚动显示第二个菜单，该菜单将变为粘滞状态。我在这里实现了一个粗略的版本：http://jsfiddle.net/hSpLQ/

我有两个主要问题

1）内容不能平滑滚动。如果您快速滚动，您会注意到内容不能顺利移动。

2）我不确定这是实现此类动画/效果的最佳方式。代码很粗糙，但我想知道是否有更好/更优化的方法来实现这一目标。

由于

这是粗略原型的代码（与JsFiddle链接相同）

<html lang="en">
    <head>
        <style type="text/css">
            body{
                height: 2000px;
            }

            .container {
                position: fixed;
                top: 0px;
                left: 0px;
                width: 100%;
                background-color: #CCC;
                height: 80px;
                overflow: hidden;
            }

            .content1, .content2 {
                height: 40px;
                margin: 40px;
            }
        </style>

    </head>
    <body>
        <div class="container">
            <div class="content">
                <div class="content1">
                    lots of text
                </div>
                <div class="content2">
                    more text
                </div>
            </div>
        </div>
    </body>

    <script src="js/jquery.min.js"></script>

    <script type="text/javascript">
        $(window).scroll(function() {
            var scrollYpos = $(document).scrollTop();
            if (scrollYpos > 200 && scrollYpos < 300) {
                var y = 200-scrollYpos;
                $(".content").css({'position': 'relative', 'top': y});
            }
        });
    </script>

</html>

Answer 1

由于无法控制用户CPU，浏览器，浏览器版本，甚至显卡等，因此您无能为力。您可以尝试使用vanilla JavaScript而不是jQuery来提高性能，但它可能不会有太大帮助（它可能不会改变任何东西，具体取决于它的渲染或脚本解释器是否很慢）。
例如，在我的浏览器中，您的示例运行得非常顺利这真的取决于你的客户看起来如何，这只是网络。不要太担心它。

最后我注意到了两件事：

您不必为每个收到滚动事件设置“position：relative”，只需在样式表中设置一次
如果滚动得太快，菜单会卡在奇数位置

以下是解决上述问题的代码，尽管它可能无法修复smoothnes问题：

$(window).scroll(function() {
    var scrollYpos = $(document).scrollTop();

    var y;
    if (scrollYpos > 200 && scrollYpos < 300) {
        y = 200 - scrollYpos;
    } else if (scrollYpos > 300) {
        y = -100;
    } else {
        y = 0;
    }

    console.log(y);
    $(".content").css({'top': y});
});

如果您只是想稍微平滑滚动间隔之间的间隙，请尝试以下方法：

$(window).scroll(function() {
    var scrollYpos = $(document).scrollTop();

    var y;
    if (scrollYpos > 200 && scrollYpos < 300) {
        y = 200 - scrollYpos;
    } else if (scrollYpos > 300) {
        y = -100;
    } else {
        y = 0;
    }

    var position = parseInt($(".content").css('top'));
    if((scrollYpos < 300 && scrollYpos > 200)
    || (position   < 0   && position   > -100)) {
        $(".content").stop().animate({'top': y}, 50);
    }
});

如何通过页面滚动使内容在固定div中平滑滚动

1 个答案: