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

问题描述：

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

<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>

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

相关推荐