Javascript 将导航栏粘贴到页面顶部时，它会从中间向左移动

因此，我目前正在进行一个项目，并且有正确的代码，可以在滚动通过菜单栏后将其粘贴到顶部。但是，当菜单栏不是页面的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>

一些CSS代码：

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

---

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

我建议使用bootstrap3。它应该内置到VisualStudio中。它使使用他们预先构建的css变得更加容易。

我建议使用bootstrap3。它应该内置到VisualStudio中。它使使用他们预先构建的css变得更加容易。

我建议使用bootstrap3。它应该内置到VisualStudio中。它使使用他们预先构建的css变得更加容易。

我建议使用bootstrap3。它应该内置到VisualStudio中。这使得使用他们预先构建的css变得非常容易。

这是固定元素的预期行为。。。如果未指定

left

值，则默认为

left:0。因此，要使其居中，请：

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

您必须根据需要跨断点调整此值，但这就是为什么您的导航会像那样跳转。
这是固定元素的预期行为。。。如果未指定
left
值，则默认为
left:0。因此，要使其居中，请：

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

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

您必须根据需要跨断点调整此值，但这就是为什么您的导航会像那样跳转。
这是固定元素的预期行为。。。如果未指定
left
值，则默认为
left:0。因此，要使其居中，请：

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

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

您必须根据需要跨断点调整此值，但这就是为什么您的导航会像那样跳转。
这是固定元素的预期行为。。。如果未指定
left
值，则默认为
left:0。因此，要使其居中，请：

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

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

您必须根据需要跨断点调整此值，但这就是为什么您的导航会像那样跳转。
我认为您的菜单具有固定的宽度。当菜单粘贴到顶部时，将类的宽度。menucontainer更改为100%

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

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

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

我想你们的菜单有固定的宽度。当菜单粘贴到顶部时，将类的宽度。menucontainer更改为100%

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

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

我想你们的菜单有固定的宽度。当菜单粘贴到顶部时，将类的宽度。menucontainer更改为100%

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

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

我想你们的菜单有固定的宽度。当菜单粘贴到顶部时，将类的宽度。menucontainer更改为100%

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

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

我们能看看你的css吗？我的建议？使用纯css，不要依赖javascript进行页面布局。@MatthewRath你能给我一个这样做的例子吗？只需使用常规的水平菜单栏，并使用带有大z索引的
position:fixed
（以确保它始终位于顶部）动画也可以基于css。我建议找到一个框架来支持你。如果你对SASS bourbon/neat很满意，可能是最好的选择（参见示例）。我们可以看看你的css吗？我的建议？使用纯css，不要依赖javascript进行页面布局。@MatthewRath你能给我一个这样做的例子吗？只需使用常规的水平菜单栏，并使用带有大z索引的
position:fixed
（以确保它始终位于顶部）动画也可以基于css。我建议找到一个框架来支持你。如果你对SASS bourbon/neat很满意，可能是最好的选择（参见示例）。我们可以看看你的css吗？我的建议？使用纯css，不要依赖javascript进行页面布局。@MatthewRath你能给我一个这样做的例子吗？只需使用常规的水平菜单栏，并使用带有大z索引的
position:fixed
（以确保它始终位于顶部）动画也可以基于css。我建议找到一个框架来支持你。如果你对SASS bourbon/neat很满意，可能是最好的选择（参见示例）。我们可以看看你的css吗？我的建议？使用纯css，不要依赖javascript进行页面布局。@MatthewRath你能给我一个这样做的例子吗？只需使用常规的水平菜单栏，并使用带有大z索引的
position:fixed
（以确保它始终位于顶部）动画也可以基于css。我建议找到一个框架来支持你。如果你对SASS bourbon/neat很满意，那可能是最好的选择（参见示例）。这样做是正确的，但一旦卷轴回来，它就把事情搞砸了。尤其是页面的动态布局，这项工作正常，但一旦卷轴回来，它就搞砸了。尤其是页面的动态布局，这项工作正常，但一旦卷轴回来，它就搞砸了。尤其是页面的动态布局，这项工作正常，但一旦卷轴回来，它就搞砸了。特别是页面的动态布局，因为我需要一个非常定制的导航栏，我需要不用引导就可以完成，但是谢谢！由于我需要一个非常定制的导航栏，所以我需要不用引导就完成它，但是谢谢！由于我需要一个非常定制的导航栏，所以我需要不用引导就完成它，但是谢谢！由于我需要一个非常定制的导航栏，我需要