固定divの位置でスクロールするときのページのコンテンツを隠す

私はページをスクロールするときにdivの位置が固定されています。ページをスクロールすると相対位置divのコンテンツがページの下に表示されます固定div（私は固定divがページの上から余白を持っているので私はスクロールコンテンツを見ることができます）。私はスタックのオーバーフローで多くを検索し、bodyやhtmlにパディングを与えたり、相対配置されたdivに余白やパディングを与えるなどのあらゆるソリューションを試しましたが、どれも私のために働いていません。 Javaスクリプトを使用し、bodyやhtmlに埋め込みを使用したくない場合もあります。たとえば、これらの質問は表示されますが、私にとってはうまくいきません。 link1,,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; 
}

出典

2017-06-17 tannaz

私は多少私はあなたが探していると思いますが、例を追加しました。

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>

出典

2017-06-17 08:52:54

固定divの位置でスクロールするときのページのコンテンツを隠す

答えて

関連する問題