当前,当我向下滚动时,我正在尝试使导航栏保持粘性,但是,它无法正常工作。我尝试使用W3 Schools方式,并在position: sticky
元素上尝试了#nav
。我希望我的导航栏在滚动时保持在屏幕顶部。
#nav {
width: 100%;
margin: 0;
padding-top: 5px;
text-align: center;
list-style: none;
overflow: hidden;
background-color:rgba(255, 255, 255, 0.171);
}
#nav li {
display: inline-block;
text-align: center;
padding-top:2px;
text-align: center;
padding-bottom:8px;
margin-left:20px;
}
#nav li a {
display: block;
text-decoration: none;
text-align: center;
font-weight: 600;
text-align: center;
color: black;
font-family: 'Open Sans';
margin-right:50px;
margin-left: 35px;
padding: 8px;
}
#nav li a:hover {
color: rgb(29, 57, 179);
text-align: center;
background-color: rgba(226, 226, 226, 0.637);
transition: ease-in-out;
transition-duration: 0.2s;
}
<div id="nav">
<li><a href="#">Home</i></a></li>
<li><a href="#">About Us</a></li>
<img width="50px" height="45px" text-align="center" src="file:///C:/Users/trist/Downloads/camera.svg">
<li><a href="#">Our Services</a></li>
<li><a href="#">Contact</a></li>
</div>
答案 0 :(得分:1)
向下滚动时尝试此操作,导航将保持在顶部
body {
height: 500vh;
}
#nav {
position: fixed;
width: 100%;
margin: 0;
padding-top: 5px;
text-align: center;
list-style: none;
overflow: hidden;
background-color: rgba(255, 255, 255, 0.171);
}
#nav li {
display: inline-block;
text-align: center;
padding-top: 2px;
text-align: center;
padding-bottom: 8px;
margin-left: 20px;
}
#nav li a {
display: block;
text-decoration: none;
text-align: center;
font-weight: 600;
text-align: center;
color: black;
font-family: 'Open Sans';
margin-right: 50px;
margin-left: 35px;
padding: 8px;
}
#nav li a:hover {
color: rgb(29, 57, 179);
text-align: center;
background-color: rgba(226, 226, 226, 0.637);
transition: ease-in-out;
transition-duration: 0.2s;
}
<div id="nav">
<li><a href="#">Home</i></a></li>
<li><a href="#">About Us</a></li>
<img width="50px" height="45px" text-align="center" src="file:///C:/Users/trist/Downloads/camera.svg">
<li><a href="#">Our Services</a></li>
<li><a href="#">Contact</a></li>
</div>
答案 1 :(得分:1)
您可以这样做:
#nav {
position: fixed;
top: 0;
z-index: 99;
}
您只需要在导航栏上失去透明度,并在导航栏的顶部从顶部偏移一下容器,否则它将看起来像是重叠/粉碎在一起。