如何仅使用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上增加一个页边距。