jquery css - 修复菜单跳转答案

【问题标题】：jquery css - fixed menu jumpingjquery css - 修复菜单跳转
【发布时间】：2015-07-01 09:59:16
【问题描述】：

我有一些代码如下： https://jsfiddle.net/k77986kL/

这个想法是有一个标题（包含图像、文本和其他各种东西），下面是一个导航菜单。我的目标是在页面首次加载时让导航菜单在标题下方开始，但是当用户向下滚动并且菜单到达屏幕顶部时，它将一直停留在那里直到用户向上滚动

正如您从小提琴中看到的那样，我得到的行为是正确的，但有轻微的跳跃。当您向下滚动到导航菜单到达顶部的那一刻时，内容会突然向下跳。当你向上滚动页面时，内容会再次跳转。它不会跳很多，但它的跳动足以引起注意，尤其是在快速滚动时

查看我的 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 完整，以防它们可能导致此问题

【问题讨论】：

它对我来说很好用。没有跳动。
奇怪。我以为可能是我的电脑，但我只是在另一台 Windows 机器上尝试过，它仍然会跳。主要在 chrome 中测试，但在 IE 中尤其糟糕
要明确：只有当黑色导航菜单到达页面顶部时才会发生跳转（即所有橙色标题部分都已滚动过去）
我认为你应该看看 .Clone()。这个想法是，当菜单到达页面顶部时，您将其克隆，然后克隆在页面下方浮动。当您再次到达顶部时，克隆将被移除。这是我的一个演示克隆的老小提琴。我知道这不是你想要的 100%，但我认为它可能会让你走上正确的道路JSFiddle
我个人认为你的眼睛在捉弄你，这是一种奇怪的效果，焦点在滚动中改变。关于Clone()，取决于您正在克隆的DOM 的大小，该方法可能需要一些时间。我会随时更改 CSS 属性。

标签： javascript jquery html css menu

【解决方案1】：

问题是当你设置position: fixed 时，nav 不在页面的流动中，留下它所占用的空间。因此，内容会上升以填充该空间。当nav 变为position: relative 时，情况正好相反。

为了解决这个问题，我只需将margin-top 设置为header 元素，以填充nav 占用的空间，并在不需要时将其删除。

DEMO

完整代码如下：

$(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;
        }
    });
}

);

【讨论】：