滚动后固定辅助导航栏

Question

我浏览了一些帖子，找到了大部分答案，但它仍然无法正常工作。

您在 jsfiddle 上看到的栏应该低于顶部，因为在我的主站点上有一个固定的 header，这个辅助栏应该低于它。我可以将其固定在 jsfiddle 上，但不能固定在我的网站上。正如您所看到的，当它变为固定时它正在缩小。

HTML:

<header>
    <img class="logo" src="images/headerLogo.png">
    <p class="about lighter">ABOUT US</p>
    <p class="contact lighter">CONTACT US</p>
    <img class="getStarted" src="images/getStarted.png">
</header>

<div class="mainSection1">
    <h1>SAVE TIME & MONEY</h1>
    <h2 class="lighter">CONCIERGE HAS ALL THE ANSWERS</h2>

    <p>.99 VALUE<br>FREE FOR YOUR CLIENTS</p>

    <img class="getStarted" src="images/getStarted.png">
</div>

<div class="subBar">
<p class="first">VALUE</p> <p class="second">SERVICES</p> <p class="third">BRANDS</p> <p class="fourth">HOW IT WORKS</p>
</div>

JS：

var nav = $('.subBar');
if (nav.length) {
    var fixmeTop = nav.offset().top -100;
    $(window).scroll(function () {
        var currentScroll = $(window).scrollTop();
        if (currentScroll >= fixmeTop) {
            $('.subBar').css({
                position: 'fixed',
                width: '100%',
                top: '73px',
                left: '0'
            });
            $('header').css(
                    'box-shadow', 'inherit'
            );
        } else {
            $('.subBar').css({
                position: 'static'
            });
            $('header').css(
                    'box-shadow', '0px 5px 9px #515151'
            );
        }
    });
}

css:

.subBar {
    background: #F1F1F2;
    height: 65px;
}

.subBar p:first-child {
    margin-left: 15%;
    border-left: 1px solid #bbbdc0;
}

.subBar p {
    float: left;
    border-right: 1px solid #bbbdc0;
    width: 17%;
    text-align: center;
    height: 44px;
    margin-top: 0px;
    padding-top: 21px;
    font-weight: lighter;
}

Answer 1

这是因为 div .subBar 没有给出 width.

因此，当它的位置固定时，它的宽度会缩小，默认为 auto。

所以指定一个固定宽度。它将在任何位置采用该宽度。

此外，您需要在左侧和右侧留出一些边距，以使其与您想要的保持一致。

您可以进行以下更改：

.subBar {
    background: #F1F1F2;
    height: 65px;
    width:100%;
}

另一个更准确的解决方案： jquery

中的变化

if (currentScroll >= fixmeTop) {
            $('.subBar').css({
                position: 'fixed',
                top: '72px'

            });
        } else {
            $('.subBar').css({
                position: 'static',
                width:'auto';
            });
        }

检查FIDDLE。

Answer 2

问题已解决！我决定制作第二个开始隐藏的导航栏，而不是当我向下滚动时显示的导航栏。它似乎不那么紧张，并且没有将原始栏从 dom 中取出（它与它下面的其他元素混淆）。

滚动后固定辅助导航栏

Fixed secondary Nav bar after scrolling

javascript

jquery

header

sticky

navbar