Javascript 当用户向下滚动时，如何使边栏停止在特定的div处？

我使用这段代码在用户向下滚动时将边栏固定在某个div。问题是我必须手动输入一个阈值，这并不总是理想的，因为该部分的位置可能会改变，或者在不同的浏览器和系统中不一致。我想知道是否有一种方法可以在用户向下滚动并点击顶部时自动修复侧边栏

小提琴

HTML

<header>
    I'm the header
</header>
<div id="container">
    <aside id="sidebar">
        <div class="section1">I'm a sidebar section</div>
        <div class="Section2">I'm another sidebar section</div>
    </aside>
    <section id="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis turpis turpis, dictum id sollicitudin eu, molestie ut tellus. Nam tincidunt mauris in erat vehicula adipiscing. Morbi cursus orci a nisl auctor nec porta eros consectetur. Vestibulum auctor congue mi, vitae molestie nisi faucibus vel. Ut et dui ut mauris posuere dignissim in et sapien. Duis a nulla ipsum. Duis accumsan porttitor justo at pretium. Aliquam quam urna, eleifend vitae consequat et, pharetra eu lectus. Etiam id magna mi. Donec pulvinar nibh in felis placerat condimentum consectetur enim iaculis. Integer et sapien justo, ac ullamcorper nisi. Praesent sed mauris non lacus pellentesque condimentum. Sed hendrerit consectetur nisi bibendum convallis. Pellentesque semper faucibus tortor malesuada dignissim.</p>
        <p>Aliquam adipiscing commodo est, eu venenatis mi ullamcorper cursus. Integer vel magna in neque aliquet hendrerit. Mauris eros nisl, venenatis quis ultricies id, faucibus et mi. Nunc sit amet nulla odio. Phasellus quis eros id tortor imperdiet faucibus ac eu metus. Curabitur at feugiat dui. Vivamus imperdiet lectus id orci sodales sit amet eleifend ante tempus. Mauris vehicula elit eu dolor volutpat porttitor.</p>
        <p>Praesent pretium convallis diam, sed faucibus dolor convallis eget. Pellentesque sollicitudin erat ac ligula viverra vel mollis diam tristique. Nulla tempus ligula ac dui fringilla consequat. Suspendisse accumsan volutpat semper. Morbi bibendum vehicula nibh id condimentum. Maecenas auctor mattis libero, ut suscipit tellus interdum quis. Nam eu dolor orci. Proin et tortor diam. Phasellus blandit leo ut elit faucibus varius. Donec condimentum congue lectus, sit amet gravida diam aliquet at.</p>
        <p>Praesent eu libero sem. Phasellus elementum posuere velit, id aliquet ante elementum non. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus faucibus rutrum luctus. Suspendisse nec facilisis neque. Cras dui lacus, pellentesque at fermentum sollicitudin, aliquam et nisi. Proin eget sem diam, nec faucibus nulla. In nibh dolor, interdum at egestas a, dictum sed massa. Integer quis elit vitae enim lacinia tristique ac id purus. Pellentesque fermentum tempor sem sit amet venenatis. Nulla facilisi. Donec semper ultrices magna, posuere mattis turpis rhoncus ut.</p>
        <p>Etiam porttitor erat sit amet odio egestas sit amet mollis magna convallis. Sed porttitor aliquet velit at placerat. Proin in turpis non velit gravida eleifend quis ac magna. Nunc sagittis, eros a pulvinar gravida, mauris urna viverra lorem, non posuere orci ligula vitae justo. Nulla neque erat, tempus at dapibus sit amet, scelerisque ac sapien. In in magna sapien, at auctor tellus. Donec nec turpis ligula, vitae scelerisque arcu.</p>
    </section>
</div>

JS

body {
    margin:0;
}

header {
    line-height:100px;
    height:100px;
    background-color:#F00;
}

#container {
    position:relative;
}

#sidebar {
    position:absolute;
    background-color:#0F0;
}

#sidebar .section1 {
    background: blue;
    height: 150px;
    width: 80px;
}

.Section2.fixed {
   position:fixed;
   top:0;
}
#sidebar .Section2 {
    background: pink;
    height: 150px;
    width: 80px;
}
#sidebar.fixed {
    position:fixed;
    top:0;
}

#content {
    margin-left:100px;
}

p:first-child {
    margin-top:0;
}

$(window).scroll(function () {
    var threshold = 250;
    if ($(window).scrollTop() >= threshold)
        $('.Section2').addClass('fixed');
    else
        $('.Section2').removeClass('fixed');
});

---

请尝试以下操作，而不是指定阈值

var threshold =  $('.Section2').offset().top;
$(window).scroll(function () {
    if ($(window).scrollTop() >= threshold)
        $('.Section2').addClass('fixed');
    else
        $('.Section2').removeClass('fixed');
});

---

在我们的讨论之后，我想我会发布一个替代方案，该方案将具有灵活的内容

每次触发scroll事件时，它只会获得

部分2

偏移量（但仅当其尚未

时）。已修复
）：

编辑：只需检查阈值是否大于零：

var $Section2 = $('.Section2');
$(window).scroll(function () {
    var threshold =  $Section2.offset().top;
    if (threshold>0 && $(window).scrollTop() >= threshold){
        $Section2.addClass('fixed');
    } else {
        $Section2.removeClass('fixed');
    }
});

再次感谢你，詹姆斯。一旦时间限制到期，我将确保勾选答案。第2部分的位置可能会改变（即，如果浏览器大小调整，或内容插入/刷新/重新设置样式等）。每次启动滚动事件时，最好获取其偏移量called@Moob一旦
部分2
固定，将阈值移动到滚动功能将使值为0@Desi我认为，由于标题部分也是固定的，这是造成问题的原因。作为一个快速修复方法，您可以尝试使用这个
var threshold=$（'.Section2'）.offset（）.top+153。如果是，请告诉我working@Desi你能试试这个
var header_height=$（'#masthead'）.height（）吗；变量阈值=$（'.Section2'）.offset（）.top+收割台高度在两个不同的选项卡中打开网站，然后在一个选项卡中进行上述更改并刷新页面。现在检查更改前后是否有任何差异。+1对于这个@Moob，您在演示中使用的是相同的jquery，而不是您的jquery。