在固定 div 位置下滚动时隐藏页面内容答案

【问题标题】：hide content of page when scrolling under a fixed div position在固定 div 位置下滚动时隐藏页面内容
【发布时间】：2017-11-19 22:40:27
【问题描述】：

我有一个固定的 div 位置，它距页面顶部有一个边距，当我滚动页面时，我的相对位置 div 的内容（具有页面内容）在固定 div 下可见（我可以看到滚动内容，因为我的固定 div 从页面顶部有边距）。我在堆栈溢出中进行了很多搜索，并尝试了所有解决方案，例如为 body 和 Html 提供填充或为我的相对定位的 div 提供边距或填充，但它们都不适合我。而且内容仍然可见。我不想使用 java 脚本，也不想对 body 或 Html 使用填充。例如，我看到了这些问题，但对我不起作用： link1,link2,link3 和 link4。我的 html 代码如下所示：

<section class="all-result">
  <div class="nav">
   ...
  </div>
   <div class="results">
    .....
   </div>
</section>

css 看起来像：

.all-result{
 position:absolute;
 background: #fff;
 overflow-y: scroll;
 overflow-x: hidden;
 z-index: 4;
 right: 0;
}
.nav{ 
  position:fixed;
  margin-top:40px;
  z-index:1000;
  }
.results{
 width:100%;
 height:100%;
 position:relative;
 }

【问题讨论】：

标签： html css

【解决方案1】：

在这里我添加了一个示例，我认为您正在寻找。

body{ overflow-y: scroll;}
.all-result
{
 position:absolute;
 width:100%;
 height:3000px;
 overflow: hidden;
 z-index: 4;
 background:#759A97;
}
.nav{ 
  width:100%;
  height:40px;
  position:fixed;
  margin-top:40px;
  z-index:1000;
  background:#B9B9B9;
  }
.results
{
 top:100px;
 height:300px;
 position:relative;
 background:#9A8975;
}

<!DOCTYPE html>
<html>

<body>

<section class="all-result">
 
 <div class="nav">
 
  </div>
   <div class="results">
    Page Content
   </div>

 
</section>

</body>
</html>

【讨论】：