如何在没有JS的情况下制作粘性的导航吧？ [英] How to make a sticky navbar without JS?

问题描述

我要创建粘滞的导航栏。在滚动过程中，它应该漂浮在内容上，如果页面滚动到顶部，它应该显示在内容之前。

我的实现几乎正常工作，但当页面滚动到顶部时，部分内容与导航栏重叠。

每次更改窗口大小(请参阅fixContentPadding函数)时，我都会更新padding-top的padding-topCSS属性，从而使其能够与JS一起使用。

没有JS可以做到这一点吗？

举个例子：

function fixContentPadding() {
  const navbarElement = document.getElementById("navbar");
  const contentElement = document.getElementById("content");

  contentElement.style.paddingTop = navbarElement.offsetHeight + "px";
}

document.addEventListener("resize", fixContentPadding);
document.addEventListener("DOMContentLoaded", fixContentPadding);

#navbar {
  position: fixed;
  top: 0;
  z-index: 1;
  width: 100%;
  background: lightblue;
}

#content {
  min-height: 200vh;  /* to demonstrate scrolling */
  border: 1px solid lightblue;
}

<div id="navbar">
  <a href="/">Hello, World!</a>
</div>

<div id="content">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

推荐答案

这就是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>

这篇关于如何在没有JS的情况下制作粘性的导航吧？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！