javascript - 在 JavaScript 中实现粘性导航器时避免不愉快的跳过

Question

我正在尝试向我的博客添加一个粘性导航器，当向下滚动时它将保持在最顶部。很简单，我使用了 jQuery 和 .scrollTop()。

$("document").ready(function($){
    /* Sticky Navigation Bar */
    var nav = $('nav');
    $(window).scroll(function () {    
        if ($(this).scrollTop() > 125) {
            nav.addClass("fixed-nav");
        } else {
            nav.removeClass("fixed-nav");
        }
    });
});

使用 fixed-nav 在 CSS 中固定定位

.fixed-nav {
  z-index: 9999;
  position: fixed;
  top: 0;
}

它确实有效(参见 my blog)。尽管如此，我还是遇到了一个小但非常烦人的问题。当您从上向下滚动页面时，您会注意到就在导航栏变为fixed 之前，其下方的内容会向上跳动一点。我知道原因是 fixed 定位将导航器带出流，因此后续内容会跳起来重新填充其位置。但我不知道如何避免这种情况。任何人都可以提出任何想法吗？

Answer 1

一个简单的解决方案是在你的 body 上切换一个 nav-fixed 类，然后将一个 margin-top 添加到你的 #main 静态定位时匹配导航高度的 div。

.nav-fixed nav {
    z-index: 9999;
    position: fixed;
    top: 0;
}

/* Identical to nav's height */
.nav-fixed #main {
    margin-top: 40px;
}