在另一个div上滚动一个div

Question

我想让我的divs相互滚动,没有它们向上滚出屏幕.

我用两个div来管理这个,但不能设法用第三个做同样的事情.

我在jsFiddle上做了一个例子:http://jsfiddle.net/gv8GU/ 所以当你这样做时它会起作用:

#one{
    width: 100%;
    height: 800px;
    position: fixed;

    background: gold;
}

#two{
    width: 100%;
    height: 800px;
    top: 800px;
    position: relative;

    background: goldenrod;
}

#three{
    width: 100%;
    height: 200px;
    top: 800px;
    position: relative;

    background: darkgoldenrod;
}

但这仅适用于前两个div.

因此,当第二个div(#two)一直滚动到顶部并进一步滚动时,我希望第二个div保持在顶部,在第二个div上滚动第三个div(#three).

Answer 1

抱歉答案 - 我看到了"Parallax"标签并且很兴奋.

我认为我理解你想要的东西 - 基本上当每个"区域"到达顶部时,它会锁定在那里,下一个区域从底部侵入.

我认为答案是切换到固定在顶部的位置,当div位置越过顶部时保持为零.当他们需要粘性时,也许会使用"锁定"类.

据我所知CSS不能做你想要的 - 它需要一种响应滚动位置的方式,所以这是一个Javascript解决方案.

我刚才没有时间编写代码,但是你需要一个初始化例程来存储div的原始位置.当滚动位置发生变化时,您需要将其与每个div的原始位置进行比较,以确定何时div应显示为固定与流入.

当div变得固定时,你还需要一些保留垂直空间的方法,因为它们不会占用任何空间.尝试向左浮动适当高度的零宽度div,在内容div之后清除它.

对不起,我无法进一步完善这一点.

PS在jsfiddle上工作了,http://jsfiddle.net/xtyus/1/

HTML

<!-- 1. Items that are not in fixed position * latched * scroll normally -->
<!-- 2. Items that go above the scroll position are given .latched -->
<!-- 3. If they scroll down again, they lose .latched -->
<!-- 4. div.spacer included to pad out space when content sections become latched -->

<div class="spacer"></div>
<div class="one">
    <h2>ONE</h2>
    <p>Lorem ipsum</p>
</div>
<div class="spacer"></div>
<div class="two">
    <h2>TWO</h2>
    <p>Lorem ipsum</p>
</div>
<div class="spacer"></div>
<div class="three">
    <h2>THREE</h2>
    <p>Lorem ipsum</p>
</div>
<div class="spacer"></div>
<div class="four">
    <h2>FOUR</h2>
    <p>Lorem ipsum</p>
</div>
<div style="clear: both"></div>
<div style="height: 1000px"></div>

CSS

.container {
    background: black;
    position: relative;
}
.spacer {
    width: 0;
    height: 600px;
    float: left;
     clear: both;
}
.one { background:red; width: 100%; height: 600px; position: relative; float: left; }
.two { background: blue; width: 100%; height: 600px; position: relative; float: left; }
.three { background: green; width: 100%; height: 600px; position: relative; float: left; }
.four { background: yellow; width: 100%; height: 600px; position: relative; float: left; }
.latched { position: fixed; top: 0; left: 8px; right: 8px; width: auto; }

JAVASCRIPT(使用jQuery 1.9.1测试)

(function($){
    /* Store the original positions */
    var d1 = $('.one');
    var d1orgtop = d1.position().top;
    var d2 = $('.two');
    var d2orgtop = d2.position().top;
    var d3 = $('.three');
    var d3orgtop = d3.position().top;
    var d4 = $('.four');
    var d4orgtop = d4.position().top;

    /* respond to the scroll event */
    $(window).scroll(function(){
        /* get the current scroll position */
        var st = $(window).scrollTop();

        /* change classes based on section positions */
        if (st >= d1orgtop) {
            d1.addClass('latched');
        } else {
            d1.removeClass('latched');
        }
        if (st >= d2orgtop) {
            d2.addClass('latched');
        } else {
            d2.removeClass('latched');
        }
        if (st >= d3orgtop) {
            d3.addClass('latched');
        } else {
            d3.removeClass('latched');
        }
        if (st >= d4orgtop) {
            d4.addClass('latched');
        } else {
            d4.removeClass('latched');
        }
    });

})(window.jQuery);

标记