Question

我想让我的div相互滚动，而不会让它们向上滚动到屏幕外。

我用两个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（#three）超过第二个。

Answer 1

对于duff的回答感到抱歉 - 我看到了“Parallax”标签并且很兴奋。

我认为我理解你想要的东西 - 基本上每个“区域”都位于顶部，它会锁定在那里，下一个区域会从底部侵入。

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

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

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

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

很抱歉，我无法进一步改进这一点。

P.S。在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);

标记

Answer 2

年龄较晚，但使用ScrollMagic将是实现这一目标的更好方法。查看他们的scrollwipes部分：http://scrollmagic.io/examples/basic/section_wipes_natural.html

基本的想法是，您可以创建全屏部分，将它们放入scrollMagic场景，然后使用setPin(el)将它们设置为动画。

<section class="panel blue">
    <b>ONE</b>
</section>
<section class="panel turqoise">
    <b>TWO</b>
</section>
<section class="panel green">
    <b>THREE</b>
</section>
<section class="panel bordeaux">
    <b>FOUR</b>
</section>

<script>
    $(function () { // wait for document ready
        // init
        var controller = new ScrollMagic.Controller({
            globalSceneOptions: {
                triggerHook: 'onLeave'
            }
        });

        // get all slides
        var slides = document.querySelectorAll("section.panel");

        // create scene for every slide
        for (var i=0; i<slides.length; i++) {
            new ScrollMagic.Scene({
                    triggerElement: slides[i]
                })
                .setPin(slides[i])
                .addIndicators() // add indicators (requires plugin)
                .addTo(controller);
        }
    });
</script>

Answer 3

我发现你的身高有些混乱了。将值更改为以下值时，它会起作用：

body{
    width: 100%;
}

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

    background: gold;
}

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

    background: goldenrod;
}

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

    background: darkgoldenrod;
}

这很有效，如下所示：http://jsfiddle.net/gv8GU/2/

希望这适合你，-Jcpopp

在另一个div上滚动一个div

3 个答案: