如何使div元素在導航欄滾動時下移

我想讓導航欄下面的div元素在導航欄下滾動時向上滾動。目前，當我向上滾動時，內容會覆蓋導航欄。我嘗試使用一些在計算器中的解決方案，但不知何故，它不適用於我的情況。非常感謝您的幫助。如何使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

是你的問題解決了嗎？如果是的話，也許你可以「接受」其中的一個答案？ – shaochuancs

實際上，在您的代碼中，div元素位於導航欄下方。它似乎是「過度」，因爲導航欄的背景色是透明的（rgba(0,0,0,0)）。要解決這個問題，你需要的是定義導航欄的背景色爲白色：

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

請檢查CodePen。

來源

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

對於水平導航欄

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

來源

2017-04-08 01:30:01 bearwithbeard

可以嘗試z索引和位置固定的組合。另外確保沒有其他元素的z-index高於導航欄。

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

來源

2017-04-08 02:39:04 Boogy

請嘗試：

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

來源

2017-04-08 02:52:51 itacode

如何使div元素在導航欄滾動時下移

回答

相關問題