粘性定位的详解——position：sticky

原创于 2023-12-26 15:15:00 发布

· 2.2k 阅读

24 ·

版权

文章标签：

#前端 #css3 #css

前端知识总结专栏收录该内容

46 篇文章

订阅专栏

首先可以先预览一下博客：https://blog.csdn.net/qq_44327851/article/details/135149046，对定位的相关知识进行简单的回顾。言归正传，在实际开发运用中，我们不可置否的会发现：接触最多定位是absolute,relative，而对于粘性定位，在开发中我们可能不会一下子想到。那什么是粘性定位，一般应用在什么场景呢？让我们一起来探索！

概念：

position: sticky是CSS中的一种定位方式，它允许元素在滚动时固定在特定位置，直到滚动到特定位置时才开始滚动。它会产生动态效果，是relative和fixed的结合。

特点：

当元素在屏幕上可见时，它的行为就像position: relative；当元素在屏幕上不可见时，它的行为就像position: fixed。
当滚动到元素的位置时，元素会固定在指定的位置，直到滚动到另一个指定位置。
元素的固定位置是相对于最近的具有滚动条的祖先元素。

示例：
假设我们有一个导航栏，当用户向下滚动页面时，导航栏应该固定在页面的顶部。当用户向上滚动时，导航栏应该回到原来的位置。

<!DOCTYPE html>
<html>
<head>
  <style>
    .navbar {
      position: -webkit-sticky; /* Safari */
      position: sticky;
      top: 0;
      background-color: #f1f1f1;
      padding: 10px 0;
    }
    .content {
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="navbar">
    <a href="#home">Home</a>
    <a href="#news">News</a>
    <a href="#contact">Contact</a>
  </div>

  <div class="content">
    <h3>Sticky Navigation Bar Example</h3>
    <p>Scroll this page to see the effect. When you scroll this page, the navigation bar will stick to the top of the page.</p>
  </div>
</body>
</html>

失效情况：

父元素不能设置为overflow:hidden或者overflow:auto：当父元素设置了overflow:hidden或者overflow:auto时，粘性定位可能会失效。因为粘性定位需要根据父级元素的滚动来确定是否固定，如果父元素设置了overflow:hidden或者overflow:auto，可能会影响这种滚动行为。
必须指定top、bottom、left、right中的至少一个值：如果没有指定这些值中的任何一个，元素将仅处于相对定位状态，而不会表现为粘性定位。
父元素的高度不能低于sticky元素的高度：如果父元素的高度低于sticky元素的高度，那么当元素到达底部时，它将无法保持固定位置。
粘性元素仅在其父元素内生效：粘性定位是相对于其最近的具有滚动条的祖先元素的，如果没有滚动条的祖先元素，粘性定位可能会失效。

注意事项：