固定要素の上に背景の画像/色以外を表示しない

私たちのページには、スクロールするときにページの上部にあるposition: fixedヘッダーがあります。当社の製品チームは、この固定要素とトップナビゲーションバーの間にギャップ/マージンを持たせたいと考えています。固定要素の上に背景の画像/色以外を表示しない

しかし、このギャップを追加すると、ユーザーがスクロールすると、要素が固定ヘッダーの上にスクロールして表示されます。私は、問題を表示するためにjsfiddleを作成しました：

https://jsfiddle.net/9n50o567/

あなたは下にスクロールする場合は、スクロールしている間に、グレーのセクションでは、水色のヘッダーの上に表示されます。

これをユーザーに非表示にする方法はありますか？つまり、固定要素の上に表示されるのは、背景色か背景画像です（ユーザーごとに異なります）。基本的に要素をマスキングしますか？

bodyの背景色と同じ色のdivを作成しようとしましたが、これは背景画像がある場合は機能しません。また、jQueryを使用して、そのセクションに含まれる要素を検出し、スクロールする際にそれらを隠すことを試みましたが、要素がヘッダーより大きい場合、早期に消滅します。

これが意味をなさないかどうかわからないので、これ以上質問がある場合は、下にお尋ねください。

出典

2016-06-21 Cameron W.

これは完全ではありませんが、確かにそれは色のために機能しますが、背景画像は少し難しいかもしれません。

<body>のボディにbgの色を継承した擬似要素が機能しているようです。（background-attachment:fixed付き）

body { 
 
    background: red; 
 
    position: relative; 
 
} 
 
body::before { 
 
    content: ''; 
 
    height: 25px; 
 
    display: block; 
 
    width: 100%; 
 
    background: inherit; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.header { 
 
    background-color: #ccffff; 
 
    height: 300px; 
 
    width: 500px; 
 
    border: 1px solid black; 
 
    position: fixed; 
 
    top: 25px; 
 
    left: 8px; 
 
} 
 
.push { 
 
    height: 335px; 
 
} 
 
.section { 
 
    background-color: #cccccc; 
 
    height: 300px; 
 
    width: 500px; 
 
    border: 1px solid black; 
 
    margin-bottom: 15px; 
 
    z-index: 10; 
 
}

<div class="header"></div> 
 

 
<div class="push"></div> 
 

 
<div class="section"></div> 
 
<div class="section"></div> 
 
<div class="section"></div> 
 
<div class="section"></div> 
 
<div class="section"></div> 
 
<div class="section"></div> 
 
<div class="section"></div>

JSfiddle Demo

背景画像フィドル - Fiddle

出典

2016-06-21 10:08:12

これは美しく動作します！ご協力ありがとうございました。 –

divを使用してギャップ（.headergap）として機能します。

のCss：

.headergap{ 
    background-color: #cccccc; 
    position:fixed; 
    top:0px; 
    height: 25px; 
    width: 100%; 
} 

.header { 
    background-color:#ccffff; 
    height:300px; 
    width:500px; 
    border:1px solid black; 
    position:fixed; 
    top:25px; 
    left:8px; 
} 

.push { 
    height:335px; 
} 

.section { 
    background-color: #cccccc; 
    height:300px; 
    width:500px; 
    border:1px solid black; 
    margin-bottom:15px 
}

HTML：

<div class="headergap"></div> 
<div class="header"></div> 

<div class="push"></div> 

<div class="section"></div> 
<div class="section"></div> 
<div class="section"></div> 
<div class="section"></div> 
<div class="section"></div> 
<div class="section"></div> 
<div class="section"></div>

はフィドルを参照してください： https://jsfiddle.net/6bhhn869/

出典

2016-06-21 09:44:15

返信いただきありがとうございますが、これは我々がしようとしているソリューションの1つです、しかし、身体に背景画像がある場合、これはうまくいかないでしょうか？ –

ああ、もう一つは、あなたの背景イメージをJPEGにトリミングして.headerdivに適用することです。背景イメージの縮尺に応じて問題が解決される可能性があります。 –

Updated code

vhを使用していますが、jqueryを使用して高さを計算してin-wrapに適用することがあります。

出典

2016-06-21 10:08:05 Tushar

固定要素の上に背景の画像/色以外を表示しない

答えて

関連する問題