Question

我正在浏览一些帖子，但我找到了最多的答案，但它仍然无法正常使用。

你在jsfiddle上看到的栏应该低于顶部，因为我的主站点上有一个固定的标题，这个辅助栏应该低于它。我可以将它修复到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>$79.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没有给出任何宽度。

因此，当它的位置固定时，它的宽度会缩小，默认情况下会将其设为自动。

因此请指定固定宽度。在任何位置都需要这个宽度。

此外，您需要在左右两侧留出一些余量，以便它保持不变。

您可以进行以下更改：

.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中取出（与其下面的其他元素相混淆）。

滚动后修复辅助导航栏

2 个答案: