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

Question

I'm using this code to make the sidebar fixed at a certain div while the user scrolls down. The problem is that I have to manually enter in a threshold number and this isn't always ideal since the position of the section may change or be inconsistent across various browsers and systems. I'm wondering if there is a way I can automatically have the sidebar become fixed once the user scrolls down and .Section2 hits the top.

Fiddle

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

Instead of specifying the threshold value try this

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

DEMO

Answer 2

Further to our discussions I thought I would post an alternative to the accepted solution that will work with flexible content.

It simply gets Section2 offset each time the scroll event is fired (but only if its not already .fixed ):

EDIT : simply check that threshold is greater than zero:

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