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

Why does sticky nav jump when fixed?

本文关键字：定时 导航 为什么      更新时间：2023-09-26

我的网址是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放在nav之后，以适合它应该在nav下面。还有其他好主意吗?

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

当你的导航变得粘滞/固定后，其余的布局在页面上向上移动，以填充导航相对定位时的空间(或最初的流)。

为标题添加一个静态高度，这样当导航栏脱离流时它就不会收缩，就像这样:

header { height: 117px; }

我有一个问题，一个容器(300px中心与边界)的对齐应该是固定的。在内容到达容器后，它稍微跳跃(大约2-5像素右)。我设法解决了这个问题，把0边距和填充在css)的主体

相关文章：