Html 在另一个 div 上滚动 div

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16688545/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:41:13  来源:igfitidea点击:

scroll div over another div

htmlscroll

提问by Luc

I have two div with a height of 100%. And when you scroll, I want that the second div over the other scrolls, without scrolling the first up.

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

Like on this site: http://www.endzeit-ausstellung.de/

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

I looked in Firebug, but I can't find the solution there, can anybody help me?

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

Much thanks in advance!

非常感谢!

回答by paschka

you dont need jquery plugins to do this ?scrolling-effect“. you just need some css ;)

你不需要jquery插件来做到这一点?滚动效果“。你只需要一些 css ;)

quick and dirty example here:

快速和肮脏的例子在这里:

HTML

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

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;
    }

demo here:

演示在这里:

jsfiddle Example

jsfiddle 示例

btw: i've made the endzeit-ausstellung.de site.

顺便说一句:我制作了 endzeit-ausstellung.de 网站。

回答by Nitesh

This is called Parallaxeffect scrolling. This involves a lot of things to make it work. check out the resources for the same. The best one I foundwhich is much similar to the website reference that you have provided.

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

Hope this helps.

希望这可以帮助。

回答by EpokK

Check jParallax with jQuery : http://stephband.info/jparallax/

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

回答by Dan

This is parallax scrolling, and there a lot of good libraries to help you out. I've used these before and they work well:

这是视差滚动,有很多很好的库可以帮助你。我以前使用过这些,它们运行良好:

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

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

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

视差.js - http://stolksdorf.github.io/Parallaxjs/

回答by oezguensi

There is a much simpler way. I found it on W3Schools. The important part is to add background-attachment: fixed. The full CSS looks like this:

有一个更简单的方法。我在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;
}