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;
}

Answer 2

这种情况正在发生，因为您设置的位置为fixed，top: 0（默认情况下也添加了left: 0）。添加left: 50%; margin-left: -100px即可。

Updated fiddle

Answer 3

您可以使用具有正协调和负边距的方法。 http://jsfiddle.net/p77dK/2/ 更新：在向后滚动http://jsfiddle.net/p77dK/7/后恢复保证金这些是共同用于集中绝对元素的。

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

$(window).scroll(function()
        {
                if( $(window).scrollTop() > stickyHeaderTop ) 
                {
                    $('#stickyheader').css({position: 'fixed', top: '0px', margin: '0 -100px',left:'50%'});
                        $('#stickyalias').css('display', 'block');
                        // also set content top padding under menu
                } 
                else 
                {
                        $('#stickyheader').css({position: 'static', top: '0px',  margin: '0 auto'});
                        $('#stickyalias').css('display', 'none');
                }
        });

其他方式。

固定容器也可以用作包装器，并在需要时显示滚动条。然后，bar就像在常规容器中一样，可以使用margin:auto;居中 http://jsfiddle.net/p77dK/6/

粘滞的菜单divi在卡住时不会保持居中

3 个答案: