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

时间:2014-02-15 20:33:31

标签: jquery

我有一个视差式主页,每个部分都会从数据库中调用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;
}

0 个答案:

没有答案