web-dev-qa-db-ja.com

ページをスクロールするときに、透明な固定位置divの後ろにスクロール可能なコンテンツを非表示にしますか？

固定位置で設定されたヘッダーと呼ばれるdivがあります。問題は、ページをスクロールすると、ページのコンテンツがヘッダーの後ろに表示されることです（ヘッダーは透明です）。

私はcssについてよく知っていますが、これを理解することはできません。オーバーフローを非表示に設定しようとしましたが、機能しないことはわかっていました（機能しませんでした）。

これは説明するのが非常に難しいので、私は最善を尽くしました。

html：

<div id="header">
    <div id="topmenu">Home | Find Feeds | Subscriptions</div>
</div>
<div id="container">
    <div id="content">
        testing
    </div>
</div>

css：

#header {
    margin:0 auto;
    position: fixed;
    width:100%;
    z-index:1000;
}
#topmenu {
    background-color:#0000FF;
    height:24px;
    filter: alpha(opacity=50);
    opacity: 0.5;
}

#leftlinks {
    padding: 4px;
    padding-left: 10px;
    float: left;
}

#rightlinks {
    padding: 4px;
    padding-right: 10px;
    float: right;
}

#containerfixedtop {
    width: 100%;
    height: 20px;
}

#contentfixedtop {
    margin: 0 auto;
    background-color: #DAA520;
    width: 960px;
    height:20px;
}

#container {
    position: relative;
    top: 68px;
    width: 100%;
    height: 2000px;
    overflow: auto;
}

#content {
    margin: 0 auto;
    background-color: #DAA520;
    width: 960px;
    height: 2000px;
}

これが問題のスクリーンショットです。

enter image description here

csspositionfixed
16
mtlca401

これだけ遅れて来ましたが、将来誰かがこれに遭遇した場合のために、ここにあなたの修正があります。

あなたのCSSコード：

.wrapper {
    width:100%;
    position:fixed;
    z-index:10;
    background:inherit;
}

.bottom-wrapper {
    width:100%;
    padding-top:92px;
    z-index:5;
    overflow:auto;
}

あなたのHTML：

<div class="wrapper">
    ...your header here...
</div>
<div class="bottom-wrapper">
    ...your main content here...
</div>

これにより、サイトに完全に一致するヘッダーが提供され、上部にフロートします。メインコンテンツはヘッダーが表示されない状態でスクロールし、ヘッダーを通過すると非表示になります。 .bottom-wrapper padding-topは、ヘッダーラッパーのコンテンツの高さでなければなりません。

乾杯！

15
Martin

あなたはおそらくz-indexを探しています。これにより、ページ上の要素の垂直方向の順序を指定できるため、z-index: 10を持つ要素は、z-index: 5を持つ要素の上に（視覚的に）浮かんでいます。

コンテンツをz-index: 5にして、機能するかどうかを確認します。

8
Blender

私は同様の問題を抱えていて、私のケースの解決策を見つけました。フルスクリーンの背景画像を使用しているか、単色（白を含む）を使用しているかにかかわらず適用されます。

HTML

<div id="full-size-background"></div>
 <div id="header">
  <p>Some text that should be fixed to the top</p>
</div>
<div id="body-text">
  <p>Some text that should be scrollable</p>
</div>

CSS

#full-size-background {
z-index:-1;
background-image:url(image.jpg);
background-position:fixed;
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
}
#header {
position:fixed;
background-image:url(image.jpg);
height:150px;
width:100%;
}
#body-text {
margin-top:150px;
}

これにより、透明な固定ヘッダーがあるページ全体の画像のように見え、本文のコンテンツがスクロールすると、ヘッダーの後ろに隠れます。画像がシームレスに表示されます。

単色の背景でも同じことができますが、おそらく、もっと簡単だったでしょう。

2つの注意事項：ヘッダーには一定の高さがあり、FFとChromeでのみテストしました。

5
Scott Sawyer

します#header設定された高さがありますか？

#header {position: fixed; height: 100px; }
#container {position: absolute; top: 100px; bottom: 0; overflow: auto; }

IEでもこれが機能しないことを確認してください...

1
asymptote

ヘッダーの下のコンテンツdivの位置を修正し、コンテンツdivのオーバーフロー-オーバーフローを行います。

0
takrishna

これは答えるのが遅いと思います。しかし、後で、誰かがこれが役立つだろう外観を持っています。

ヘッダークラ​​スに背景を追加するだけ

これがコードです->

#header {
    margin:0 auto;
    position: fixed;
    width:100%;
    z-index:999;
    background-color:#FFFFFF;
}
#topmenu {
    background-color:#0000FF;
    height:24px;
    filter: alpha(opacity=50);
    opacity: 0.5;
   
}

#container {
    position: relative;
    top: 68px;
    width: 100%;
    height: 2000px;
    overflow: auto;
    z-index:1;
}

#content {
    margin: 0 auto;
    background-color: #DAA520;
    width: 960px;
    height: 2000px;
}
<!DOCTYPE html>
<html>


<body>

<div id="header">
    <div id="topmenu">Home | Find Feeds | Subscriptions</div>
</div>
<div id="container">
    <div id="content">
        testing
    </div>
</div>
</body>
</html>
0
Mohamed Mohaideen AH

私も同様の問題に直面しましたが、単純なダーティハックを使用して解決しました

1）画像フォルダに白い画像がある

2）次に、このCSSをヘッダースタイルで追加します

z-index：999; //スクロールするコンテンツの上にヘッダーを作成します

background-image：url（ "../ images/white.png"）; //スクロールするコンテンツを非表示にする

3）出来た!!

0
naveen