3

我想让我的 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) 滚动到第二个。

4

3 回答 3

6

很抱歉这个愚蠢的答案 - 我看到了“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);

标记

于 2013-05-24T17:28:25.550 回答
1

年代晚了，但使用 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>
于 2017-03-22T13:07:19.763 回答
0

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

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

于 2013-05-24T17:34:43.517 回答