在固定的DIV位置滚动时隐藏页面内容

我有一个固定的div位置，从页面顶部有一个边距，当我滚动页面时，我的相对位置div(具有页面内容(的内容在固定的div下可见(我可以看到滚动内容，因为我的固定div从页面顶部有边距(。我在堆栈溢出中搜索了很多，并尝试了所有解决方案，例如为正文和 HTML 提供填充或提供边距或提供边距或填充到我的相对定位的div，但它们都不适合我，而且内容仍然可见。我不想使用java脚本，也不想为body或Html使用填充。例如，我看到这些问题，但对我不起作用：链接 1、链接 2 、链接 3 和链接 4。我的 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;
 }

在这里我添加了一个例子，有点我想你要找。

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>

相关内容

最新更新

热门标签：