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

一个简单的解决方案是在您的身体上切换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;
}

在JavaScript中实现粘性导航器时避免令人不快的跳过

1 个答案: