Hacer un div arreglado mientras se desplaza por cierta área de la página

Tengo una página de inicio de estilo de paralaje que llama a un número x de instancias de una base de datos para cada sección. Entonces, por ejemplo, tengo una sección llamada 'películas' con 3 películas llamadas para mostrar en la página de inicio.

Mientras el usuario se desplaza por las '3 películas', me gustaría que el encabezado de toda la sección de películas permanezca fijo justo debajo del encabezado del sitio principal.

Estoy familiarizado con agregar/eliminar/alternar clases a través de jquery de acuerdo con scroll/px, pero debido a que la altura de cada sección cambiará dinámicamente, no estoy seguro de cómo lograrlo. Además, la altura de algunas secciones está definida por el tamaño de la pantalla de los usuarios, no por px.

¿Hay alguna manera de alternar una clase según la sección por la que se está desplazando? Entonces, por ejemplo, si se desplaza por div-1, fije la posición del encabezado 1 ... si se desplaza por div-2, fije la posición del encabezado 2 ... etc.

Aquí hay un jsfiddle como punto de partida, dejé la sección js en blanco porque lo que se me ocurrió no parece funcionar de todos modos. Para facilitar todo, definí la altura de cada sección en 1000 px, pero en el escenario real, esto cambiará dinámicamente. http://jsfiddle.net/ericbrockman/2ZNw6/1/

aquí está el marcado:

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

y estilos:

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