Javascript jquery css-修复了菜单跳转

我有一些代码如下：

其思想是有一个标题（包含图像、文本和各种其他内容），下面是导航菜单。我的目标是当页面第一次加载时，让导航菜单在标题下启动，但是当用户向下滚动并且菜单到达屏幕顶部时，它将保持在那里，直到用户向上滚动为止

正如你从小提琴上看到的，我的行为是正确的，但有点神经质。当您向下滚动到导航菜单到达顶部时，内容会突然跳下。当你向上滚动页面时，内容再次跳转。它跳得不多，但跳得足够明显，尤其是快速滚动时

查看我的jquery，我看不出是什么导致了这个问题：

$(function () {
    var nav = $('nav');
    var navHomeY = nav.offset().top;
    var isFixed = false;
    var $w = $(window);
    $w.scroll(function () {
        var scrollTop = $w.scrollTop();
        var shouldBeFixed = scrollTop > navHomeY;
        if (shouldBeFixed && !isFixed) {
            nav.css({
                position: 'fixed',
                top: 0,
                width: nav.width()
            });
            isFixed = true;
        } else if (!shouldBeFixed && isFixed) {
            nav.css({
                position: 'relative'
            });
            isFixed = false;
        }
    });
}

);

---

这都是从我的主项目文件中提取出来的，因此其中可能有一些css元素是演示本身所必需的，但我保留了这些选择器的css，以防它们可能导致此问题。

问题是，当设置

位置：fixed

时，

nav

超出了页面的流程，留下它所占据的空间。因此，内容将上升以填充该空间。当

nav

变为

position:relative

时，情况正好相反

为了解决这个问题，我只需将

边距顶部

设置到

标题

元素，填充

导航

所占用的空间，并在不需要时将其删除

以下是完整的代码：

$(function () {
    var nav = $('nav');
    var header = $('header');  // get header element
    var navHomeY = nav.offset().top;
    var isFixed = false;
    var $w = $(window);
    $w.scroll(function () {
        var scrollTop = $w.scrollTop();
        var shouldBeFixed = scrollTop > navHomeY;
        if (shouldBeFixed && !isFixed) {
            nav.css({
                position: 'fixed',
                top: 0,
                width: nav.width()
            });
            header.css('marginTop', nav.height()); // set margin-top
            isFixed = true;
        } else if (!shouldBeFixed && isFixed) {
            nav.css({
                position: 'relative'
            });
            header.css('marginTop', 0); // remove margin-top
            isFixed = false;
        }
    });
}

);

---

这对我来说很好。没有神经质，奇怪。我以为可能是我的电脑，但我只是在另一台windows机器上试了一下，它还是跳了起来。主要在chrome中测试，但在IEto中尤其糟糕：只有当黑色导航菜单到达页面顶部（即所有橙色标题部分都已滚动过去）时才会发生跳转。我认为您应该查看.Clone（）。其思想是，当菜单点击页面顶部时，您可以克隆它，然后克隆在页面下方浮动。当您再次到达顶部时，克隆将被删除。这是我的一把老小提琴，它演示了克隆。我知道这不是你想要的100%，但我认为这可能会让你走上正确的道路。我认为你的眼睛在捉弄你，这是一种奇怪的效果，焦点在滚动中改变。关于

Clone（）

，根据要克隆的DOM的大小，该方法可能需要一些时间。我会随时更改CSS属性。