2

上下に 2 つの div があり、上の 1 つは透明です。ただし、スクロールすると、最初の透明なdiv の下にあるので、一番下の div を非表示にする必要があります。

最初の div の下に移動するとすぐに 2 番目の divdisplay:を変更したくありません。none;下にある部分を隠したいだけです。

私は答えを求めて広範囲にグーグルで検索しました：

1) 透明なヘッダーの下にスクロール コンテンツを非表示にする

2) ページをスクロールするときの透明な固定位置 Div の背後にあるスクロール可能なコンテンツ

3) 透明なヘッダー Div の下のスクロール ボディ

4) 透明な静的ヘッダーは、スクロール時にヘッダーの下にテキストが表示されないようにしたい

5) 固定透明ヘッダースクロール背景の下にスクロールコンテンツを隠す

＃1-4の答え divを一番上にするbackground: inheritかbackground-image: url('background_image.jpg)'。私にとってこれに関する問題は、私の背景が写真であることです。つまり、下にスクロールすると、色やパターンとは対照的に、表示されるものが異なります。透明な div の「背景」は、実際の背景が変化するにつれて変更する必要があります。

＃5はJQueryを使用してこれに対する解決策を提供しますが、Firefoxではなくブラウザでのスクロールラグに関する恐ろしい、恐ろしい問題があります.

皆さん、どうすればいいですか？

4

1 に答える 1

2

これは、JavaScript なしでは実行できません。透明なレイヤーを通してコンテンツが表示されないようにするには、まったくレンダリングしてはなりません — を使用する必要がありますoverflow:hidden。問題は、コンテンツがページとともにスクロールする場合、コンテンツの端を修正できないことです。要素は、ビューポートまたはページに対して相対的に配置できますが、両方を同時に配置することはできません。

于 2012-10-29T22:33:42.153 に答える