1

我正在尝试创建一个固定的顶部导航，当您向下滚动页面时菜单会发生变化。当您滚动超过某个 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>
4

1 回答 1

1

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

最后，我注意到了两件事：

  1. 您不必在每次收到滚动事件时都设置“位置：相对”，只需在样式表中设置一次
  2. 如果滚动太快，菜单就会卡在一个奇怪的位置

这是解决上述问题的代码，尽管它可能无法解决平滑问题：

$(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);
    }
});
于 2013-07-21T21:04:50.413 回答