DEMO

Question

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

小提琴

http://jsfiddle.net/EvAdP/6/

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>

CSS

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;
}

JS

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

Answer 1

而不是指定阈值，请尝试此

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

DEMO

Answer 2

在我们的讨论之后，我想我会发布一个可以使用灵活内容的公认解决方案的替代方案。

~~每次触发滚动事件时，它只会被Section2偏移（但仅当它不是.fixed时）：~~

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

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

DEMO

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

2 个答案:

DEMO