粘贴时如何使导航栏居中？

Question

在最近的项目中，我想添加一个 scroll-then-fix header。我对此进行了彻底的研究，但许多在线资源都没有什么帮助，因为它们依赖于各种语言的旧版本，或者广泛依赖于无法解释的 'magic numbers'。最终，我决定自己简单地编写代码，并生成了以下内容：

$(document).ready(function(){
    var elementPosition = $('#navbar').offset();
    $(window).scroll(function () {
        if ($(window).scrollTop() > elementPosition.top) {
            $('#navbar').css('position', 'fixed').css('top', '0');
        } else {
            $('#navbar').css('position', 'static');
}})});

这有助于将导航栏粘在顶部，但每当它激活时它都会粘在左上角而不是保持其居中位置。我要更改的只是 'position' 并添加属性 'top'，所以我看不出它突然横向移动的原因。如果您有任何修复或解释，我将不胜感激。作为参考，这里是相关的 HTML:

<div id="navbar"><ul>
    <li id="activePage"><a href="">Home</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Upcoming events </a><li>
    <li><a href="">Contact Us</a></li>
    <li><a href="">Contribute</a></li>
</ul></div>

和css：

#navbar {
    background-color: white;
    z-index: 1;
}

#navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    text-align: center;
    width: 100%;
}

#navbar li {
    text-align: center;
    display: inline;
}

#navbar ul #activePage a {
    color: #cec8c8;
}

#navbar li a {
    color: black;
    padding: 14px 35px;
    text-decoration: none;
    font-family: 'Roboto Slab';
    font-size: 25px;
    text-align: center;
}

提前感谢您提供的所有帮助！

Answer 1

问题在于，绝对定位或固定定位的元素只会在屏幕上占据 space 的数量作为其中的内容。因此，该元素将从占据屏幕 100% 宽度的默认块元素转变为仅占据内部内容所需宽度的固定定位元素。

解决这个问题的一个简单方法是向元素添加 left: 0; right: 0;，告诉它跨越 window 视口的宽度。

您可以通过更改此行来做到这一点

$('#navbar').css('position', 'fixed').css('top', '0');

至

$('#navbar').css('position', 'fixed').css({'top':'0','left':'0','right':'0'});

您也可以将 width: 100%; 分配给该元素，但是您需要注意可能出现的任何盒模型问题，或者使用 box-sizing: border-box; 来防止导航超出视口的宽度，以防您使用任何可能导致宽度扩展超过 100% 的填充或边框。

粘贴时如何使导航栏居中？

How to keep navbar centered when stickied?

html

css

jquery

navbar