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

Question

i have a fixed div position which has a margin from top of page,when i scroll my page the content of my relative position div (which has page content) is visible under a fixed div ( i can see the scrolling content because my fixed div has margin from top of page). 我有一个固定的div位置，该位置从页面顶部开始有边距，当我滚动页面时，相对位置div（具有页面内容）的内容在固定的div下可见（我可以看到滚动内容，因为我的固定div从页面顶部有页边距）。 i have searched a lot in stack overflow and try every solutions like give padding to body and Html or give margin or padding to my relative positioned div but none of them work for me.and still the content is visible.I don't want to use java scripts and also don't want to use padding for body or Html. 我已经在堆栈溢出中进行了大量搜索，并尝试了每种解决方案，例如将padding填充到body和HTML或将margin或padding填充到相对位置的div中，但是它们都不适合我。仍然可以看到内容。我不想使用Java脚本，也不想对body或HTML使用填充。 i see these questions for example but don't work for me: link1 , link2 , link3 and link4 . 我看到例如这些问题，但对我不起作用： link1 ， link2 ， link3和link4 。 my html code is look like: 我的html代码如下所示：

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

and css look like : 和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;
 }

Answer 1

Here i added an example,somewhat i think you looking for. 在这里我添加了一个示例，我认为您正在寻找什么。

 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>

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

问题描述

1 个解决方案

解决方案1
0 2017-06-17 08:52:54

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

问题描述

1 个解决方案

解决方案1 0 2017-06-17 08:52:54

解决方案1
0 2017-06-17 08:52:54