如何仅使用HTML和CSS (没有JS)制作“粘性”导航栏？
如何仅使用HTML和CSS (没有JS)制作“粘性”导航栏？
提问于 2020-08-18 05:07:13
我正在创建一个简单的HTML网页，我想创建一个“粘性”导航栏，如果页面被滚动，它会漂浮在内容上，如果页面没有滚动，它会显示在内容之前(它的最上面部分是可见的)。在第二种情况下，它几乎可以工作，但与内容重叠，所以我设法让它与JavaScript一起工作:将content-container的padding-top CSS属性设置为导航栏的offsetHeight + 15px (导航栏和滚动页面之间的缩进)，并在每次窗口大小改变时更新它。但是也许它也可以在纯CSS中完成呢？
以下是代码片段：
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, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12)
}<div id="navbar">
<a href="/">Hello, World!</a>
</div>
<div id="content-container">
<div id="content">
<p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p>
</div>
</div>
回答 3
Stack Overflow用户
回答已采纳
发布于 2020-08-18 05:19:06
这就是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><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p>
</div>
</div>
Stack Overflow用户
发布于 2020-08-18 05:18:13
在div#content-container上添加页边距-top？
#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, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12)
}<div id="navbar">
<a href="/">Hello, World!</a>
</div>
<div id="content-container">
<div id="content">
<p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p>
</div>
</div>
Stack Overflow用户
发布于 2020-08-18 05:27:35
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, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12)
}<div id="navbar">
<a href="/">Hello, World!</a>
</div>
<div id="content-container">
<div id="content">
<p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p>
</div>
</div>
在内容div等于或等于导航栏高度的位置添加一个空白处。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63458661
复制相关文章
相似问题
腾讯云开发者
