粘性头/Javascript

早上好，我正在为我的网站制作一个粘性的标题，我已经让它工作了，但它似乎很快就就位了，我想保持平稳！我该怎么办

我的网站：

CSS:

JS

---

默认情况下，标题位于文档流中，“向下推”其余内容。如果您使文档变粘，它不会向下推文档的其余部分，使其向上弹出。你可以通过让你的横幅从一开始就粘在一起，并给你的内容一个与标题高度相等的上边距来解决这个问题。通过这种方式，您可以完全摆脱javascript。

想象一下，您告诉.nav有另一个类“sticky”，它会立即将所有这些CSS规则应用到它。您可能需要jQuery动画或CSS3转换，这取决于您实际想要的“平滑”程度。您甚至不需要Javascript。在前面给你的标题一个粘性类。

.sticky {  
    position: fixed;  
    width: 100%;  
    left: 0;  
    top: 0;  
    z-index: 100;  
    border-top: 0;  
}

$(document).ready(function() {  
var stickyNavTop = $('.nav').offset().top;  

var stickyNav = function(){  
var scrollTop = $(window).scrollTop();  

if (scrollTop > stickyNavTop) {   
    $('.nav').addClass('sticky');  
} else {  
    $('.nav').removeClass('sticky');   
}  
};  

stickyNav();  

$(window).scroll(function() {  
    stickyNav();  
});  
});