html - 固定容器下方的视差滚动条

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

根据您的源代码，我做了一些更改。我将逐步解释。

假设您的导航栏的高度为 50px，我使用 margin-top:50px; 将 .parallax 类降低 50px。

此外，我们需要将导航栏的 position 属性从 fixed 更改为 absolute。

现在将有2个滚动条，一个用于正文，一个用于.parallax内容。要隐藏正文的滚动条(这是不必要的)，我们可以使用 overflow:hidden; 作为正文标记。

这一次，您将看到导航栏不会覆盖滚动条，但不幸的是，由于内容从顶部移动了 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>