Javascript 固定的第二导航栏后滚动

我浏览了一些帖子，找到了大部分答案，但对我来说仍然不太合适

您在jsfiddle上看到的条应该比顶部低，因为在我的主站点上有一个固定的标题，这个辅助条应该在它下面。我可以在JSFIDLE上修复它，但不能在我的站点上。正如你所看到的，当它变为“固定”时，它正在缩小

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>

css:

---

这是因为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';
            });
        }

---

检查。

问题是否已解决！我决定制作第二个导航条，当我向下滚动足够长的时间时，它开始隐藏，而不是显示。它似乎没有那么紧张，也没有把原来的条带出dom（这会弄乱它下面的其他元素）。

我有点不清楚你想要什么。我不明白“酒吧应该低于顶部”。我知道，为了让你的酒吧保持相同的宽度，你可以添加。子酒吧{width:100%；}更新我让我的酒吧保持固定。我发现我忘了在我的新CSS中添加宽度：100以防止条收缩。但现在我想知道是否有人知道如何阻止它“突然”进入位置。我希望它是平滑的，我不知道我需要调整什么数字。上面的代码已经被编辑成我的新代码。@crazymatt我有两个“标题”，一个始终固定在页面顶部。以及第二收割台，该收割台一旦接触到第一收割台的底部就应该固定。这就是我所说的“捕捉低于顶部”的意思，它应该粘贴到顶部标题的底部，而不是粘贴到页面的顶部。希望这更有意义。但我已经解决了我的问题。现在我最新的问题是如何让它不紧张？谢谢Kunjan我自己解决了宽度问题。不过，谢谢你给我额外的小费DJust所以你知道你的JSFIDLE不适合我。但是所有的问题都已经解决了。如果你想考虑将来不要这样做。只要定义一个没有高度的div，当物品没有粘性时，然后给它一个宽度为100%的确切高度。但我很高兴你解决了你的问题：D

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

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

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