当 html 高度为 100% 时，粘性导航中断

Sticky navigation breaks when html height: 100%

本文关键字：导航 中断 html 高度 100%      更新时间：2023-09-26

我在一个网站上有一个导航栏，目前可以使用这个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 具有高度：100% 才能使用它的粘性页脚。我能做什么？

当您将html高度设置为 100% 时，您不再滚动到窗口中，而是在html内。因此，此代码将不起作用：

$(window).scroll();
$(window).scrollTop();

尝试将window更改为 $('html,body') 。

相关文章：