html - 粘性导航栏在我的网站上不起作用
问题描述
我目前正在尝试在向下滚动时使导航栏保持粘性,但是它不起作用。我尝试过使用 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>
解决方案
向下滚动时尝试此操作,导航将保留在顶部
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>
推荐阅读
- c# - 如何使自适应卡成为集体?
- php - 如果表中的行非常高,php mysql 表查询会给出 HTTP 500 错误
- ios - 可以共享 Apple 分发证书和密钥吗?
- sse - SSE 向量重新对齐?
- javascript - 为什么 JavaScript 'forEach' 在 Cordova 中不起作用
- python - python将日志文件转换为html格式
- angular - 无法读取未定义的属性“nativeElement”
- flutter - Flutter 检查器卡在“安装开发工具”上
- wordpress-gutenberg - Gutenberg 更新自定义组件中的属性
- javascript - 我找不到从 Header 元素中删除 HTML 脚本的方法