我在一个网站上有一个导航栏,目前使用这个 jQuery 代码可以使它在滚动过去时“粘”起来:
offset = $('#navWrapper').offset();
$(window).scroll(function(){
if( $(window).scrollTop() >= offset.top ) {
$('#navWrapper').addClass('fixedNavWrapper');
$('#topHeader').addClass('fixedNavPadding');
} else {
$('#navWrapper').removeClass('fixedNavWrapper');
$('#topHeader').removeClass('fixedNavPadding');
}
});
应用和删除此 CSS:
.fixedNavWrapper {
position:fixed;
top:0;
left:0;
z-index:999;
}
.fixedNavPadding {
padding-bottom:45px;
}
当我将“高度:100%”应用于 html 时,它停止工作。我需要 html 具有 height: 100% 才能使用粘性页脚..我该怎么办?
最佳答案
当您将 html
高度设置为 100%
时,您不再滚动到窗口中,而是在 html
内部滚动。因此,此代码将不起作用:
$(window).scroll();
$(window).scrollTop();
尝试将 window
更改为 $('html,body')
。
关于javascript - 当 html 高度为 : 100% 时,粘性导航中断,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19843569/