Question

在处理最近的项目时，我想添加一个scroll-then-fix标头。我对此进行了彻底的研究，但许多在线资源都没什么帮助，因为他们依赖于各种语言的旧版本，或者广泛依赖于无法解释的“神奇数字”。最后，我决定自己编写代码，并产生以下内容：

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

这有助于将导航栏粘贴到顶部，但无论何时激活它都会将其粘贴到左上角而不是保持其居中位置。所有我正在改变的是'位置'并添加属性'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

问题在于，绝对或固定定位的元素只占用屏幕内的空间量作为其内部的内容。因此，元素将从占据屏幕宽度100％的默认块元素转移到仅占用内部内容所需宽度的固定定位元素。

解决此问题的一种简单方法是向元素添加$('#navbar').css('position', 'fixed').css('top', '0');，告诉它跨越窗口视口的宽度。

您可以通过更改此行

来实现

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

到

width: 100%;

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

粘贴时如何保持导航栏居中？

1 个答案: