Jquery 粘性菜单div doensn'；被卡住时不要保持居中

我在

中有一个菜单栏，当向下滚动时，它应该会粘在浏览器的顶部

这可以通过使用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');
  }
});

但是，

使用CSS居中：

右边距：auto；左边距：自动会以某种方式中断吗

请参见
发生这种情况是因为您正在设置位置
fixed
和
top:0
（默认情况下还添加了
left:0
）。添加<代码>左侧：50%；左边距：-100px

，它会工作的

---

您可以使用带有正坐标和负边距的方法。 更新：在向下滚动时恢复边距 这些元素通常用于将绝对元素居中

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

另一种方法。

固定容器也可以用作包装器，并在需要时显示滚动条。然后，将该条放入常规容器中，并可使用

margin:auto居中
我强烈建议您使用类，因为类将使代码更清晰，您可以更快地进行自定义


HTML

CSS

这是因为它有
位置：fixed
。你需要学习CSS来理解它是如何工作的。告诉你如何修复它很容易，但我猜你需要先学习基础知识，否则你会在5分钟后被更多的东西困住。谢谢，解决了它。我不知道left:0添加了top:0。没问题。这是定位元素的默认设置。你只能添加
position:fixed
，它会粘在左上角。hi，你的小提琴，如果你向下滚动，它的外观与我之前的一样，固定在这里恢复边距：（是的，我写得有点慢：））JSFIDLE只是一个测试，使用200px的宽度。在实际的网站上，菜单栏的宽度达到1600px，然后菜单栏居中。在iPad上，上面的代码（更正为左边距：-800px）不起作用。但是，以下css
$（'#stickyheader'）.css（{position:'fixed'，top:'0px'，right:'0'，left:'0'}）在所有浏览器/宽度中都能响应。
<div id="stickyheader">
  <div class="bar">BAR</div>
</div>
<div id="stickyalias" class="hidden"></div>

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

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