0

ナビゲーション バーがサイト全体に広がっているサイトを構築していますが、固定されています。ナビゲーション バーの下には、カバーとして設定された背景画像という画像があります。そして画像の下がメインコンテンツです。

下にスクロールすると、ナビゲーション バーが画像を上から下に覆い、メイン コンテンツが表示され、効果的に下にスクロールします。それを「逆転」させたい。そのため、ナビゲーションはカバー画像が下に固定されていますが、今回は、下にスクロールするとメインコンテンツが表示され、画像を下から上にカバーします. したがって、下にスクロールすると、メイン コンテンツが上にスクロールします。

私の画像の上部に 1 があり、下部に 2 があるとしましょう。したがって、通常、下にスクロールすると、ナビゲーション バーが画像を上から下に覆い、1 が消え、2 も覆われるまで表示されます。私が探している効果は、メイン コンテンツでカバーされるまで 2 が消え、1 が同じ場所に残ることです。

視差を調べましたが、それが正しいことかどうかはわかりません。そして、この効果を達成する方法がわかりません。

私がここでやろうとしていることを理解していただければ幸いです。さらに情報が必要な場合は、お知らせください。

前もって感謝します。

編集

効果はアブドゥジードのフロントページで見ることができます

4

2 に答える 2

2

背景に画像を「添付」する必要がありますか？もしそうなら、背景に固定することはできませんか？

body {
    background-attachment:fixed;
}

ソース: http://www.w3schools.com/cssref/pr_background-attachment.asp https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment

注: W3Schools の使用には注意してください。情報が間違っていることがよくあります。こちらを参照してください。

于 2013-08-08T12:51:11.733 に答える
0

要素を使用した例を次に示しimgます。

デモ

コード ビュー

基本的な HTML レイアウト:

<nav></nav>
<img src="/image.ext" class="scrollup" />
<div class="main"></div>

あなたが言ったように、あなたのナビは固定されます。画像の位置も固定する必要があります。その z-index を-1に設定して、カバーされていることを確認します。

img {
  position: fixed;
  width: 100%;
  z-index: -1;
  top: 20px; left: 0;
}

メイン要素は相対的に配置されます。ナビゲーションと画像はどちらも位置が固定されているため、top値はビューポートの上部を基準にしています。 スクロールを開始するとすぐに開始100%することを意味します。.main

.main {
  background: white;
  position: relative;
  top: 100%;
}
于 2013-08-08T13:19:09.997 に答える