javascript - 粘性 header /Javascript

Question

早上好，我正在为我的网站制作一个粘性 header ，我已经让它工作了，但它似乎卡入到位，我想要顺利!我该怎么做？

我的网站:http://www.trevorpeters.co.uk/tpwebdesign

CSS:

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

JS

$(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();  
});  
}); 

Answer 1

默认情况下，标题位于您的文档流中，将其余内容向下“推”。如果你让它变粘，它不会将文档的其余部分向下推，使其向上弹起。您可以通过让您的横幅从一开始就具有粘性并为您的内容提供与页眉高度相等的上边距来解决此问题。这样您就可以完全摆脱 javascript。