如何讓網站的所有部分都具有滾動效果？

我目前正在一個網站上工作，並希望爲我網站的不同部分提供「滾動」效果。如果您不清楚「翻頁」效果的含義，請訪問https://sevenbits.github.io/Mac-Linux-USB-Loader/並略微向下滾動。後繼部分翻閱他們的前輩，當他們到達頂端時，這些前輩就變得固定了。如何讓網站的所有部分都具有滾動效果？

我想弄清楚如何做到這一點與每個部分，而不是隻有頂部。如果這可能是一小段代碼，那就太好了，但如果它是很多的話也可以。

提前致謝！

來源

2016-07-28 Flare Cat

如果檢查藍色backgroudn您將看到：.splash容器{ 背景：＃1f8dd6; z-index：1; 溢出：隱藏; 寬度：100％; 身高：88％; top：0; left：0; 職位：固定！重要; – DavidB

@DavidB我注意到了，但由於這一部分是固定的，因此無法滾動。我希望後繼部分移動，然後在他們點擊屏幕頂部的導航欄時進行修復。我試圖弄清楚這是否可能。 –

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
body { 
 
    position: relative; 
 
} 
 
.navbar { 
 
    position: fixed; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100vw; 
 
    height: 20vh; 
 
    background-color: #446; 
 
    z-index: 100; 
 
    box-shadow: 0 0 20px rgba(0,0,0,.4); 
 
} 
 
.splash { 
 
    position: fixed; 
 
    left: 0; 
 
    top: 20vh; 
 
    width: 100vw; 
 
    height: 100vh; 
 
    background-color: #8ef; 
 
    z-index: 0; 
 
} 
 
.container { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100vw; 
 
    height: 100vh; 
 
    margin-top: 80vh; 
 
    background-color: #fff; 
 
    z-index: 50; 
 
    box-shadow: 0 0 20px rgba(0,0,0,.4); 
 
}

<header> 
 
    <div class="navbar"></div> 
 
    <div class="splash"></div> 
 
</header> 
 
<div class="container"></div>

來源

2016-07-28 15:11:06

謝謝，我現在就試試。 –

你需要'位置：相對;'爲'身體'嗎？如果是這樣，請解釋原因。 –

好的，謝謝，但只適用於頂部的飛濺部分。當圖像碰到頂部時，我希望它獲得飛濺類。我該怎麼做呢？ –

如何讓網站的所有部分都具有滾動效果？

回答

相關問題