固定容器下面的視差滾動條

Question

我想在頁面頂部有一個固定導航欄的網站上使用視差效果。由於視差效果處理溢出的方式，滾動條似乎位於頁面頂部的固定導航欄下方。我有一個fiddle to demonstrate this。

我曾嘗試將固定導航欄div放入視差容器內。這會移動滾動條下方的導航欄，但也會導致導航欄不固定到頁面的頂部。

這是到目前爲止我的代碼...

HTML

<div class="navbar">NavBar</div> 
    <div class="parallax"> 
    <div class="parallax_layer parallax_layer_back"> 
     <img class="backgroundImage" src="https://images.pexels.com/photos/131212/pexels-photo-131212.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"> 
    </div> 
    <div class="parallax_layer parallax_layer_base"> 
     <div class="title">Title</div> 
     <div class="content">Content area</div> 
    </div> 
    </div> 

CSS基於源代碼

.parallax { 
    height: 100vh; 
    overflow-x: hidden; 
    overflow-y: initial; 
    perspective: 1px; 
    -webkit-perspective: 1px; 
} 

.parallax_layer { 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
} 

.parallax_layer_base { 
    transform: translateZ(0); 
    -webkit-transform: translateZ(0); 
} 

.parallax_layer_back { 
    transform: translateZ(-1px); 
    -webkit-transform: translateZ(-1px); 
} 

.parallax_layer_back { transform: translateZ(-1px) scale(2); } 

.parallax_layer_deep { transform: translateZ(-2px) scale(3); } 

/* Example CSS for content */ 

* { 
    margin: 0; 
    padding: 0; 
} 

.title { 
    position: absolute; 
    left: 10%; 
    top: 30%; 
    color: white; 
    font-size: 300%; 
} 

.backgroundImage { 
    width: 100%; 
    height: auto; 
} 

.content { 
    margin-top: 100vh; 
    width: 100%; 
    height: 800px; 
    background-color: #e67e22; 
} 

.navbar {width:100%; position: fixed; z-index: 999; background-color: red;} 

Answer 1

，我已經做了一些改動。我會一步一步解釋。

假設您的Navbar的高度爲50像素，我降低.parallax類50像素下使用margin-top:50px;。

而且，我們需要您的NavBar的position屬性更改從fixed到absolute。

現在會有2滾動條，一個用於身體，一個用於.parallax內容。要隱藏身體的滾動條，這是不必要的，我們可以使用overflow:hidden;作爲身體標記。

這一次，你會看到你的NavBar不會覆蓋滾動條，但不幸的是滾動條的底部是不可見的，因爲內容從頂部移動了50px。爲了解決這個問題，我使用一個簡單的Jquery代碼來設置.parallax高度等於其餘窗口的高度。

你可以看看這段代碼。

$(document).ready(function(){ 
 
    $(".parallax").css("height",$(window).height()-50); 
 
});

.parallax { 
 
    margin-top:50px; 
 
    overflow-x: hidden; 
 
    overflow-y: initial; 
 
    perspective: 1px; 
 
    -webkit-perspective: 1px; 
 
} 
 

 
.parallax_layer { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
} 
 

 
.parallax_layer_base { 
 
    transform: translateZ(0); 
 
    -webkit-transform: translateZ(0); 
 
} 
 

 
.parallax_layer_back { 
 
    transform: translateZ(-1px); 
 
    -webkit-transform: translateZ(-1px); 
 
} 
 

 
/* Depth Correction */ 
 

 
.parallax_layer_back { transform: translateZ(-1px) scale(2); } 
 

 
.parallax_layer_deep { transform: translateZ(-2px) scale(3); } 
 

 
/* Example CSS for content */ 
 

 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.title { 
 
    position: absolute; 
 
    left: 10%; 
 
    top: 30%; 
 
    color: white; 
 
    font-size: 300%; 
 
} 
 

 
.backgroundImage { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
.content { 
 
    margin-top: 100vh; 
 
    width: 100%; 
 
    height: 800px; 
 
    background-color: #e67e22; 
 
} 
 

 
.navbar { 
 
    width:100%; 
 
    position: absolute; 
 
    top:0; 
 
    z-index: 999; 
 
    background-color: red; 
 
    height:50px; 
 
} 
 

 
body{ 
 
    overflow:hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="navbar"> NavBar </div> 
 
    <div class="parallax"> 
 
    <div class="parallax_layer parallax_layer_back"> 
 
     <img class="backgroundImage" src="https://images.pexels.com/photos/131212/pexels-photo-131212.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"> 
 
    </div> 
 
    <div class="parallax_layer parallax_layer_base"> 
 
    <div class="title">Title</div> 
 
    <div class="content">Content area</div> 
 
    </div> 
 
</div>