javascript - 将导航栏粘贴到页面顶部后，它会从中间到最左边

Question

所以我目前正在做一个元素，并且有正确的代码可以在菜单栏滚动通过后将其粘贴到顶部。但是，当菜单栏不是页面的 100% 时，它会向左倾斜。任何人都知道如何将它放回原来的位置吗？

HTML 代码:

<div class="menucontainer">
    <ul class="menu">
        <li><a href="Default.aspx">Home</a></li>
        <li><a href="History.aspx">History</a></li>
        <li><a href="Gallery.aspx">Gallery</a></li>
        <li><a href="Services.aspx">Services</a></li>
        <li><a href="Contact.aspx">Contact</a></li>
    </ul>
</div>
<div id="stickyalias"></div>

jQuery 代码:

    $(function () {
        // Check the initial Poistion of the Sticky Header
        var stickyHeaderTop = $('.menucontainer').offset().top;
        $(window).scroll(function () {
            if ($(window).scrollTop() > stickyHeaderTop) {
                $('.menucontainer').css({ position: 'fixed', top: '0px' });
                $('#stickyalias').css('display', 'block');
            } else {
                $('.menucontainer').css({ position: 'static', top: '0px' });
                $('#stickyalias').css('display', 'none');
            }
        });
    });

一些CSS代码:

.menucontainer {
    height: 50px;
    line-height: 50px;
    clear: both;
    z-index: 9999;
    opacity: .9;
    margin-left: auto;
    margin-right: auto;
    width: 1100px;
    }

如果它对任何人有帮助，可以访问该页面 mor.actiongymok.com查看它运行的实时版本。

Answer 1

这是固定元素的预期行为...如果您没有指定 left 值，它将默认为 left:0;。所以要居中，给它:

  left: 50%;
  margin-left: -550px; // half the width of your header

您必须根据需要跨断点进行调整，但这就是为什么您的导航会那样跳过。