固定容器下面的视差滚动条

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>