当滚动条到达页面顶部时,它会改变高度

Sticky scroller changes height when it hits top of page

本文关键字:改变 高度 顶部 滚动条      更新时间:2023-09-26

我有一个粘在浏览器窗口顶部的导航条。问题是,一旦它触及顶部,导航条的高度就会翻倍。我似乎看不出有什么问题。

这是我使用的javascript:

<script type='text/javascript'>//<![CDATA[ 
  $(window).load(function(){
  $(function() {
  var a = function() {
  var b = $(window).scrollTop();
  var d = $("#scroller-anchor").offset({scroll:false}).top;
  var c=$("#scroller");
  if (b>d) {
  c.css({position:"fixed",top:"0px", width:"100%",})
  } else {
  if (b<=d) {
    c.css({position:"relative",top:""})
  }
 }
};
$(window).scroll(a);a()
});
});//]]>  
</script>

以及HTML:

<div id="scroller-anchor"></div> 
<div id="scroller">
<div class="wrapper"> 
</div>
</div>

看起来您需要从.navigation类中删除margin-bottom。请不要使用内联样式或!important.

#scroller {
  height:30px;  /* height of menu */
}

修复问题