10

我有两个高度为 100% 的 div。当你滚动时，我希望第二个 div 在其他滚动上，而不是向上滚动第一个。

喜欢这个网站：http ://www.endzeit-ausstellung.de/

我查看了 Firebug，但在那里找不到解决方案，有人可以帮助我吗？

非常感谢提前！

4

5 回答 5

31

你不需要 jquery 插件来做这个“滚动效果”。你只需要一些 CSS ;)

这里快速而肮脏的例子：

HTML

<div id="wrapper">
<div id="a" class="panels">FIXED PANEL</div>
<div id="b" class="panels">Scrolling-Panel 1</div>
<div id="c" class="panels">Scrolling-Panel 2</div>
<div id="d" class="panels">Scrolling-Panel 3</div>
</div>

CSS

// reset margin and padding of body and html
    html,body {
       padding:0;
       margin:0;
       background:black;
    }

    // allows us to scale all panels inside to full width and height
    #wrapper { 
        position:absolute;
        height:100%;
        width:100%;
    }

     // make all panels fullpage  
    .panels { 
        position:relative;
        height:100%;
        min-height:100%;
        width:100%;
        z-index:1000;
    }

    // this is the fixed first panel 
    #a{ 
        background:#eee;
        position:fixed;
        color:red;
        top:0;
        left:0;
        /* prevents your fixed panel from being on top of your subsequent panels */
        z-index: -99; 
    }

    // the second panel -> after the first fixed panel
    // should get 100% top margin, thats the trick
    #b{ 
       margin-top:100%;
       background:yellow;
    }

    #c{
       background:pink;
    }

    #d{
       background:green;
    }

演示在这里：

jsfiddle 示例

顺便说一句：我已经创建了 endzeit-ausstellung.de 网站。

于 2013-06-03T12:00:08.803 回答
1

这是视差滚动，有很多很好的库可以帮助你。我以前用过这些，它们工作得很好：

Skrollr - https://github.com/Prinzhorn/skrollr

Parallax.js - http://stolksdorf.github.io/Parallaxjs/

于 2013-05-22T10:55:05.430 回答
1

用 jQuery 检查 jParallax：http ://stephband.info/jparallax/

于 2013-05-22T10:46:06.447 回答
1

这称为Parallax效果滚动。这涉及到很多事情才能让它发挥作用。查看相同的资源。我找到的最好的一个与您提供的网站参考非常相似。

希望这可以帮助。

于 2013-05-22T09:48:28.127 回答
0

有一个更简单的方法。我在W3Schools上找到了它。重要的部分是添加background-attachment: fixed. 完整的 CSS 如下所示：

.banner {
    background-image: url("foo.jpg");
    min-height: 500px; 
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
于 2019-08-19T00:05:12.190 回答