问如何仅使用HTML和CSS (没有JS)制作“粘性”导航栏？
EN

Stack Overflow用户

提问于 2020-08-17 21:07:13

回答 3查看 1.1K关注 0票数 0

我正在创建一个简单的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>

html

css

navbar

javascript

回答 3

Stack Overflow用户

回答已采纳

发布于 2020-08-17 21: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>

票数 4

Stack Overflow用户

发布于 2020-08-17 21: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>

票数 1

Stack Overflow用户

发布于 2020-08-17 21: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>