Question

我正在尝试在页面顶部有固定导航栏的网站上使用视差效果。由于视差效果处理溢出的方式，滚动条似乎位于页面顶部的固定导航栏下方。

我尝试将固定导航栏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高度为50px，使用.parallax降低margin-top:50px;等级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>

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

1 个答案: