0

「ホーム」セクションのナビゲーションの背景を透明にしておく必要があります。ただし、他のセクションの選択時にビューポートが変更されると。ナビゲーションの背景色が恒久的な黒になります。

  <header class="clearfix">
    <nav>
    <a href="#fbsection1">HOME</a>
    <a href="#fbsection2">ABOUT US</a>
    <a href="#fbsection3">EVENTS</a>
    <a href="#fbsection4">CONTACT US</a>
    </nav>
  </header>

ここにフィドルがあります

4

1 に答える 1

0

私が理解しているように、ユーザーがサイトのどのセクションにいるかに基づいてヘッダーの背景を変更する必要がありますよね?

jQuery Waypoints プラグインを見てください。スクロール位置に基づいてクラスを要素に動的に設定できます。ここでそれを参照してください: http://imakewebthings.com/jquery-waypoints/#about

または、純粋な CSS ソリューションが必要な場合は、次の codepen をご覧ください。

http://cdpn.io/KftAm

基本的に、背景には別の要素を使用し、z-index を使用してこれらのものを正しくレイヤー化します。たとえば、z-index が 1 の黒い背景要素、z-index が 2 の画像、そして z-index が 3 のナビゲーションがあります。

次に、画像を次のように設定する必要があります。position:relative;

これに関する問題は、背景要素のサイズをナビゲーションと同じサイズに設定する際に注意する必要があることです。

一番上の画像に設定するだけです：

img {
    position:relative;
    z-index:999;
}

そして実際の背景については：

.nav-bg {
    /* position and height the same as your fixed nav */
    position:fixed;
    z-index:998;
    background:#000;
}
于 2013-07-17T14:32:05.890 に答える