javascript - 为什么固定导航会跳转？

Question

我的网站是http://southsideonline.com/

我只有一个简单的 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。您遇到此问题是因为固定元素被排除在位置计算之外。