粘性卷轴在达到页面顶部时会改变高度

Question

我有一个粘性导航栏，当它接触时会粘在浏览器窗口的顶部。问题是，一旦触及顶部，导航栏的高度就会翻倍。我似乎无法看到问题所在。

这是我正在使用的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>

您可以看到问题here。

Answer 1

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

解决问题。

Answer 2

您似乎需要从margin-bottom课程中删除.navigation。请不要使用内联样式或！important。