スクロールアップ時にdiv要素をナビバーの下に移動する方法

スクロールアップするときに、ナビゲーションバーの下のdiv要素をナビゲーションバーの下に移動しようとしています。現在、スクロールアップするとコンテンツがナビゲーションバーに表示されます。私はstackoverflowでいくつかのソリューションを使用してみましたが、何とか私の場合は動作しません。親切にあなたの助けに感謝します。スクロールアップ時にdiv要素をナビバーの下に移動する方法

これは、HTMLコードです：

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 

<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0- 
alpha.2/css/bootstrap.min.css" integrity="sha384- 
y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" 
crossorigin="anonymous"> 

<meta name="viewport" content="width=device-width, initial-scale=1"> 

<div class = "container-fluid"> 
    <div class = "navigation-bar" id = "nav-bar"> 
    <div class = "w3-top"> 
    <div class = "w3-bar w3-border w3-card-4" > 
     <a href = "#" class="w3-bar-item w3-button">About</a> 
     <a href = "#" class="w3-bar-item w3-button">Portfolio</a> 
     <a href = "#" class="w3-bar-item w3-button">Contact</a> 
    </div> 
    </div> 
    </div> 
    <body> 
    <div class = "Intro" id = "myIntro"> 
    <div class="w3-panel w3-card-4"> 
    <h4 class = "header" align = "center"> My workspace</h4> 
    <p> 
    <table style="width:90%"> 
     <tr> 
     <td align = "center"><i>Aspiring developer</i></td> 
     <td align = "center"><i>Tech enthusiast</i> 
     <td align = "center"><i>Loves fishing</i> 
     </tr> 
     </table> 
     </p> 
    <hr> 
    </div> 
</div>

これは、現在のCSSコードです：

.navigation-bar{ 
    z-index: 1; 
} 
body { 
    padding: 50px; 
    z-index: -1; 
} 
h4 { 
    padding-top: 20px; 
}

あなたがここを通じて何が起こるか見ることができます：単にhttps://codepen.io/chawin/pen/EWBaxo

出典

2017-04-08 chawin

あなたの問題が解決され？はいの場合は、答えの1つを「受け入れる」ことができますか？ – shaochuancs

実際には、コード内でdiv要素がナビゲーションバーの下に表示されます。ナビゲーションバーの背景色が透明であるため（rgba(0,0,0,0)）、「上に行く」と表示されます。

.navigation-bar .w3-top { 
    background: white; 
}

CodePenを確認してください：問題を修正するために必要なのは、白とナビゲーションバーの背景色を定義しています。あなたがzインデックスと固定位置の組み合わせを試すことができ、水平ナビゲーションバー

.navigation-bar{ 
    position: fixed; 
    width: 100%; 
} 
body { 
    margin: 0; 
}

出典

2017-04-08 01:18:24 shaochuancs

、z-index属性を使用します。

デフォルトは0なので、他の要素が変更されていない場合は、ナビゲーションバーのz-indexを1に設定すると、他のすべての要素の上に表示されます。

**注：z-indexを動作させるには、位置決めを使用する必要があります。

すなわち：position: fixedあなたは正しく、あなたのページを書き換える必要があり

。周囲を遊んだあと、テキストhttp://prntscr.com/ettdzpの上に表示されるバーが見えますが、オフセットのあるパディングの追加や外部スタイルシートの使用などが完了しました。身体の外に自由空間にdivsを置くことは良い考えでもありません。

出典

2017-04-08 00:59:45 Tobiq

。また、他の要素があなたのナビゲーションバーよりも高いZ-インデックスを持たないようにしてください。

#nav-bar{ 
    position: fixed; 
    z-index:99; 
}

出典

2017-04-08 01:30:01 bearwithbeard

については

出典

2017-04-08 02:39:04 Boogy

てみてください：

.w3-top{ 
    z-index: 10; 
    background: white; 
    left: 0; 
}

出典

2017-04-08 02:52:51 itacode

スクロールアップ時にdiv要素をナビバーの下に移動する方法

答えて

関連する問題