在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

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