Question

我只是有一个简单的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置于导航之下，就像它应该的那样。还有其他一些好主意吗？

Answer 1

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

Answer 2

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

Answer 3

为标题添加静态高度，因此当导航栏离开流时它不会缩小，如下所示：

header { height: 117px; }

这对我有用。

Answer 4

我对应该固定的容器（带有边框的300px中心）的对齐方式有问题。内容到达容器后，它略有跳动（向右2-5像素左右）。我设法通过在CSS的正文中添加0边距和填充来消除它。

固定时为什么粘性导航会跳转？

4 个答案: