jquery - 粘性菜单 divi 卡住时不会保持居中

Question

我在 <DIV> 中有一个菜单栏向下滚动时，它应该会停留在浏览器的顶部。

这有效，使用 JQuery

var stickyHeaderTop = $('#stickyheader').offset().top;

$(window).scroll(function()
{
  if( $(window).scrollTop() > stickyHeaderTop ) {
     $('#stickyheader').css({position: 'fixed', top: '0px'});
     $('#stickyalias').css('display', 'block')
  } 
  else {
     $('#stickyheader').css({position: 'static', top: '0px'});
     $('#stickyalias').css('display', 'none');
  }
});

然而，<DIV>使用 CSS 居中:margin-right: auto; margin-left: auto;当菜单卡住时，它会以某种方式中断？

参见 JSFiddle

Answer 1

我强烈建议您使用类，因为这会使代码清晰，并且您可以更快地对其进行自定义。

DEMO

HTML

<div id="stickyheader">
  <div class="bar">BAR</div>
</div>
<div id="stickyalias" class="hidden"></div>

JS

            if( $(window).scrollTop() > stickyHeaderTop ) 
            {
                $('#stickyheader').addClass('fixed');
                $('#stickyalias').removeClass('hidden');                 
            } 
            else 
            {
                $('#stickyheader').removeClass('fixed');
                $('#stickyalias').addClass('hidden');
            }

CSS

#stickyheader {
  width: 100%;
}
#stickyheader.fixed {
  position: fixed;
  top: 0;
  left: 8px;/*body margin*/
  width: calc(100% - 16px);
}
#stickyalias {
  display: block;
  height: 60px;
}
#stickyalias.hidden {
  display: none;
}