在滚动页面的某个区域时固定div

Question

我有一个视差式主页，每个部分都会从数据库中调用x个实例。因此，例如我有一个名为“电影”的部分，其中有3部电影被调用以显示在主页上。

当用户滚动浏览'3部电影'时，我希望整部电影部分的标题保持固定在主网站标题下方。

我熟悉根据scroll / px通过jquery添加/删除/切换类，但由于每个部分的高度将动态变化，我不知道如何实现这一点。此外，某些部分的高度由用户屏幕大小定义，而不是px。

有没有办法根据你滚动的部分切换一个类？因此，例如，如果滚动div-1，则将header-1位置固定...如果滚动div-2，则将header-2位置固定...等等。

这是一个jsfiddle作为一个起点，我把js部分留空了，因为我提出的似乎并没有工作。为了使一切变得简单，我只是将每个部分的高度定义为1000px，但在实际情况中，这将是动态变化的。 http://jsfiddle.net/ericbrockman/2ZNw6/1/

这是标记：

<nav id="nav-main">
    <ul>
        <li><a href="#slide1">Slide 1</a></li>
        <li><a href="#slide2">Slide 2</a></li>
        <li><a href="#slide3">Slide 3</a></li>
    </ul>
</nav> <!-- #nav-main -->

<section id="slide1" class="slide">
    <article>
        <p>Bunch of content</p>
        <p>Bunch of content</p>
        <p>Bunch of content</p>
        <p>Bunch of content</p>
    </article>
</section> <!-- #slide1 .slide -->

<section id="slide2" class="slide">
    <hgroup id="header-home-slide2">
        <h2 class="section-title">Slide 2</h2>
    </hgroup>

    <article>
        <p>Bunch of content</p>
        <p>Bunch of content</p>
        <p>Bunch of content</p>
        <p>Bunch of content</p> 
    </article>
</section> <!-- #slide2 .slide -->

<section id="slide3" class="slide">
    <article>
        <p>Bunch of content</p>
        <p>Bunch of content</p>
        <p>Bunch of content</p>
        <p>Bunch of content</p>
    </article>
</section> <!-- #slide3 .slide -->

和样式：

#nav-main {
    position: fixed;
    top:0;
    z-index: 2;
}

#nav-main ul {
    position: fixed;
    top:0;
    background: #ccc;
    padding: 10px;
}

#nav-main ul li {
    display: inline;
}

.slide {
   height: 1000px;
   position: relative;
}

.sticky {
    position: fixed;
    top: 0;
}

#slide1 {
    background: none repeat scroll 0 0 #FFFFFF;
}

#slide2 {
    background: none repeat scroll 0 0 #FFFFFF;
}