4

ページを下にスクロールして多数のdivを表示するのではなく、スクロールするときに同じ場所（1つが次のdivの上に積み重ねられる）にオーバーレイするようにします。したがって、下にスクロールしますが、ページは下に移動しません。代わりに、次のdivは最初のdivをオーバーレイし、以下同様に続きます。これを行う方法がわかりませんか？これが私が持っているものです：

アップデート

.container {
    width:100%;
    height:100%;
    position:relative;

}

.container1 {
    display:block;
    position:fixed;
    margin-top:690px;
    width:100%;
    height:500px;
    z-index:1;
    background:#333;


  }

.container2 {
    display:block;
    position:absolute;
    margin-top:1190px;
    width:100%;
    height:500px;
    z-index:2;
    background:#F00;
}

<div class="container">

<div class="container1">
info
</div>

<div class="container2">
info
</div>
</div>

この調整は機能していますが、下部のdiv（container1）は500pxではなく、画面のサイズに設定されています。これはコードの簡単な調整だと確信していますが、私は困惑しています。

助けてくれてありがとう！

4

3 に答える 3

7

これは、機能している間は、ブラウザ間でテストする必要があり（ただし、どこでも機能すると確信しています）、わずかに改良する必要があるという概念実証です。

JavaScriptを使用してウィンドウのスクロール位置を監視し、それに応じて適切なコンテンツパネルを修正して、スクロールインして表示するときに新しいコンテンツが重なっているように見せることができます。

http://jsfiddle.net/amustill/wQQEM/

于 2012-10-07T20:14:33.640 に答える
3

CSSのみで視差効果を実現するには、CSSbackground-attachmentプロパティを使用して設定しfixed、追加するだけです。min-height

.parallax {
    /* The image used */
    background-image: url("img_parallax.jpg");

    /* Set a specific height */
    min-height: 500px; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
   }

このリンクをチェックしてください：
https ：//www.w3schools.com/howto/tryhow_css_parallax_demo.htm

于 2017-12-08T15:32:41.590 に答える
2

絶対位置ではなく固定位置を使用します。

.container1 {
    position: fixed;
    z-index: 1;
}
.container2 {
    position: fixed;
    z-index: 2;
}
于 2012-10-07T18:04:09.310 に答える