一行 - 使用 CSS 的粘性标题

我们有多少次遇到过这样的情况：即使你滚动浏览网站，网站的标题仍然保持在所有内容的顶部。

或者，在英雄横幅下方设置一个导航栏，当我们滚动过去时，它就会停留在顶部。

甚至让导航栏停留在移动网站的底部。

我们一次又一次地陷入这种棘手的境地 （此处双关）。现在是时候彻底解决这个问题了。

最好的部分是，我们将在一行中完成

CSS



nav {
    position: sticky; top: 0;
}

我知道你在想什么，那可是两行字！好吧，我承认我被一行字的标题迷住了，但我向你保证，它依然很棒😍

让我们看一些演示并了解它是如何工作的

演示 1：导航栏固定不动

让我们尝试了解这里发生了什么。

我使用的标记非常简单

HTML



<body>
  <nav>
    <ul>
      <li><a href="#first">First</a></li>
      <li><a href="#second">Second</a></li>
      <li><a href="#third">Third</a></li>
    </ul>
  </nav>
  <section id="first">First Section</section>
  <section id="second">Second Section</section>
  <section id="third">Third Section</section>
</body>

CSS



html {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body nav {
  position: sticky;
  top: 0;
}
ul {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  box-sizing: border-box;
  padding: 20px;
  background: #fff;
}
li {
  list-style: none;
  margin-right: 20px;
  font-size: 25px;
  font-weight: bold;
}
li a {
  text-decoration: none;
  color: #1ac;
}
section {
  height: 100vh;
  display: grid;
  place-items: center;
  font-size: 50px;
  font-weight: bold;
  background: #eee;
}

在所有这些标记中，最重要的两行是所有神奇的事情发生的地方



...
body nav{
    position: sticky;
    top: 0;
}
...

它告诉浏览器当元素的顶部位置值为 0 时，将该元素粘贴到视口上；

元素的position: sticky;定位基于用户的滚动位置。

粘性元素会根据滚动位置在relative和之间切换。它保持相对定位，直到在视口中达到给定的偏移位置 - 然后它会“粘”在原处（类似）。fixedposition: fixed

现在我们了解了它的工作原理，让我们看看另外两个用例sticky。

演示 2：英雄横幅下方的导航栏。

这里，导航栏位于英雄横幅下方。因此，它会一直起作用relative，直到它与顶部的偏移量不为 0。当偏移量达到 0 时，它就会粘在视口的顶部。

演示 3：带有粘性页眉和页脚的应用程序

注意我们如何设计footer元素的样式。



footer {
    ...
    position: sticky;
    bottom: 0;
    ...
}

好了！我们现在正式黏在一起了！🐱‍👤✌

你知道还有什么黏糊糊的吗？咖啡洒在桌子上了！我每天都靠咖啡，而且只喝咖啡。所以我知道，你知道我们都应该怎么做🤞

继续黑客攻击☕

参考

鏂囩珷鏉ユ簮锛�https://dev.to/akhilarjun/one-line-sticky-header-using-css-5gp3