如何解决如何仅使用HTML和CSS不使用JS制作“粘性”导航栏?
我正在创建一个简单的HTML网页,并且我想创建一个“粘性”导航栏,该导航栏在滚动页面时会浮在内容上,并且在滚动页面时会在内容前显示(最顶部)可见)。它几乎可以正常工作,但是在第二种情况下重叠了内容,因此我设法使其与JavaScript一起使用:将padding-top
的{{1}} CSS属性设置为导航栏的offsetHeight + 15px(导航栏之间的缩进量)以及滚动的页面),并在每次更改窗口大小时进行更新。但是也许也可以在纯CSS中完成吗?
这是代码段:
content-container
function fixContentPadding() {
document.getElementById("content-container").style.paddingTop = document.getElementById("navbar").offsetHeight + 15 + "px";
}
window.onresize = fixContentPadding;
fixContentPadding();
#navbar {
width: 100%;
background-color: lightblue;
color: white;
top: 0;
position: fixed;
z-index: 1;
}
#navbar *:hover {
background-color: #2196F3;
border-radius: 32px;
}
#navbar * {
float: left;
text-decoration: none;
}
#content {
width: 90%;
margin: auto;
word-wrap: break-word;
padding: 0.01em 16px;
box-shadow: 0 2px 5px 0 rgba(0,0.16),0 2px 10px 0 rgba(0,0.12)
}
解决方法
position: sticky
的用途是
#navbar {
position: sticky;
top: 0;
background: aliceblue;
}
<div id="navbar">
<a href="/">Hello,World!</a>
</div>
<div id="content-container">
<div id="content">
<p>Hello,World!</p><p>Hello,World!</p>
</div>
</div>
,
div#content-container上的页边空白吗?
#navbar {
width: 100%;
background-color: lightblue;
color: white;
top: 0;
position: fixed;
z-index: 1;
}
#navbar *:hover {
background-color: #2196F3;
border-radius: 32px;
}
#navbar * {
float: left;
text-decoration: none;
}
#content-container {
margin-top:40px;
}
#content {
width: 90%;
margin: auto;
word-wrap: break-word;
padding: 0.01em 16px;
box-shadow: 0 2px 5px 0 rgba(0,0.16),0 2px 10px 0 rgba(0,0.12)
}
<div id="navbar">
<a href="/">Hello,World!</p>
</div>
</div>
,
function fixContentPadding() {
document.getElementById("content-container").style.paddingTop = document.getElementById("navbar").offsetHeight + 15 + "px";
}
window.onresize = fixContentPadding;
fixContentPadding();
#navbar {
width: 100%;
height: 3em;
background-color: lightblue;
color: white;
position: fixed;
top: 0;
z-index: 1;
}
#navbar *:hover {
background-color: #2196F3;
border-radius: 32px;
}
#navbar * {
float: left;
text-decoration: none;
}
#content {
width: 90%;
margin: 3em auto auto auto;
word-wrap: break-word;
padding: 0.01em 16px;
box-shadow: 0 2px 5px 0 rgba(0,World!</p>
</div>
</div>
在内容div等于或等于导航栏最高点的内容div上增加一个页边距。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。