为什么固定导航会在固定时跳转？答案

【问题标题】：Why does sticky nav jump when fixed?为什么固定导航会在固定时跳转？
【发布时间】：2014-07-25 19:52:14
【问题描述】：

我只有一个简单的sticky.js，可以修复滚动时的导航栏，但导航栏下方的内容会跳到导航栏下方。知道如何解决这个问题吗？

jQuery(function(){
  var menuOffset = jQuery('.menu-wrapper')[0].offsetTop;
  jQuery(document).bind('ready scroll',function() {
    var docScroll = jQuery(document).scrollTop();
    if(docScroll >= menuOffset) {
      jQuery('.menu-wrapper').addClass('fixed');
    } else {
      jQuery('.menu-wrapper').removeClass('fixed').removeAttr("width");
    }
   });
});

似乎它被认为是一个简单的修复。我尝试使用 jQuery .next() 将下一个 .css 的 margin-top 放在 nav 之后，使其正好适合 nav 的下方。还有其他好主意吗？

【问题讨论】：

导航栏下方的内容跳到导航栏下方是什么意思？您是指滚动时内容位于导航栏下方吗？我在 Chrome 36 上没有发现任何异常。
你用什么浏览器看到这个？
没关系，我现在明白你的问题了。我可以看到问题

标签： javascript jquery navigation sticky

【解决方案1】：

用另一个div（占位符）包装您的<div class="menu-wrapper" id="menu-wrapper">，并通过CSS（等于固定菜单高度）或使用JS将height设置为84px。您遇到了这个问题，因为固定元素被排除在位置计算之外。

【讨论】：

谢谢你！就是这样。在为所有屏幕尺寸修复它的过程中......我只做了大约一年。在我的空闲时间，所以我一直在学习。非常感谢！！！

【解决方案2】：

在您的导航变得粘滞/固定后，布局的其余部分会在页面上向上移动，以填充导航在相对定位时（或最初具有流动性）时所处的空间。

【讨论】：

这不是答案，这是对问题的描述。

【解决方案3】：

为您的标题添加一个静态高度，这样当导航栏离开流程时它不会缩小，如下所示：

header { height: 117px; }

这对我有用。

【讨论】：

Andrei Baibakou 下面更具体。我确实设置了一个高度，但我需要对占位符 div 进行设置。不过谢谢！
这对我有用，因为导航在标题中。因此，即使导航变得粘滞并且不包含在高度计算中，标题仍然保持相同的高度，因此其余页面元素的定位也是如此。谢谢！

【解决方案4】：

我在对齐本应修复的容器（300 像素中心与边框）时遇到问题。内容到达容器后，它略微跳跃（大约 2-5 px 右）。我设法通过在 css 中在 body 上放置 0 边距和填充来解决它。

【讨论】：