将导航栏粘贴到页面顶部时，它从中间到最左侧

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

您必须根据需要在断点之间进行调整，这就是为什么您的导航像这样跳过的原因。

Answer 2

$(function () {
    // Check the initial Poistion of the Sticky Header
    var stickyHeaderTop = $('.menucontainer').offset().top;
    var menuContainerWidth =$('.menucontainer').outerWidth();

    $(window).scroll(function () {
        if ($(window).scrollTop() > stickyHeaderTop) {
            $('.menucontainer').css({ position: 'fixed', top: '0px',left:'50%',marginLeft:menuContainerWidth/2 + 'px'});
            $('#stickyalias').css('display', 'block');
        } else {
            $('.menucontainer').css({ position: 'static', top: '0px',left:'auto',marginLeft:'0px' });
            $('#stickyalias').css('display', 'none');
        }
    });
});

Answer 3

我认为您的菜单宽度固定。 当菜单停留在顶部时，将class .menucontainer的宽度更改为100％。

如果您希望菜单保持相同大小，请将以下CSS添加到.menucontainer

  .menucontainer{
   left: 0;
   right: 0;
   }

Answer 4

我建议使用bootstrap3。 它应该内置在Visual Studio中。 使用他们的预构建CSS可以轻松得多。