如何使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元素在导航栏滚动时下移

回答

相关问题