Question

因此，我正在开发一个项目并拥有正确的代码，以便在滚动菜单栏后将其粘贴到顶部。但是，当菜单栏不是页面的100％时，它会向左倾斜。任何人都知道如何把它放回原处？

HTML CODE：

<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 CODE：

    $(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

我认为你的菜单有一个固定的宽度。当您的菜单贴在顶部时，将类 .menucontainer 的宽度更改为100％。

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

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

Answer 4

我建议使用bootstrap3。它应该内置在Visual Studio中。使用预先构建的CSS可以更容易。

将导航栏固定在页面顶部后，它会从中间向左侧移动

4 个答案: