Question

早上好，我正在为我的网站制作一个粘性标题，我已经开始工作，但它似乎已经到位，我想要顺利！我该怎么做？

我的网站：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

默认情况下，标题位于您的文档流程中，＆＃39;推送＆＃39;剩下的内容了。如果您将其粘贴，则不会将文档的其余部分向下推，使其向上捕捉。您可以通过从一开始就使横幅变得粘稠并为内容提供与标题高度相等的上边距来解决此问题。这样你就可以一起摆脱javascript。

粘性标题/ Javascript

1 个答案: