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

时间:2013-11-07 18:15:39

标签: javascript jquery html css

我在网站上有一个导航栏,目前正在使用此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;
}

当我将“height:100%”应用于html时,它会停止工作。我需要html才能拥有高度:100%使用粘性页脚...我该怎么办?

1 个答案:

答案 0 :(得分:0)

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

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

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