关于javascript:CSS粘性定位-它的真正工作原理

本文首发于微信公众号：大迁世界, 我的微信：qq449245884，我会第一工夫和你分享前端行业趋势，学习路径等等。
更多开源作品请看 GitHub https://github.com/qq449245884/xiaozhi，蕴含一线大厂面试残缺考点、材料以及我的系列文章。

快来收费体验 ChatGpt plus 版本的，咱们出的钱
体验地址:https://chat.waixingyun.cn
能够退出网站底部技术群，一起找 bug.

这篇文章具体解释了 CSS 中的 sticky 定位形式，并解说了它的工作原理。

CSS 中的 sticky 定位有很好的浏览器反对，但许多开发者并没有应用它。起因有两方面：一是期待浏览器反对的工夫太长，导致这个个性被忘记；二是大部分开发者并不齐全了解它的工作原理。

我假如你们都晓得 CSS 定位，但让咱们简要回顾一下：

直到 3 年前，有四个 CSS 地位：static，relative，absolute 和 fixed。

static 或 relative 与 absolute 或 fixed 之间的次要区别在于它们在 DOM 流中占用的空间。static 和 relative 保留其在文档流中的天然空间，而 absolute 和 fixed 则不保留空间，它们具备浮动行为。而新的 sticky 定位具备所有类型的相似性。

应用 position: sticky

应用 position: sticky 时，每个人都很快明确，当视口达到定义的地位时，元素会粘在那里。

.some-component{
    position: sticky;
    top: 0;
} 

有时候 sticky 定位能失常工作，有时候则不能。当它失常工作时，元素会 ” 粘 ” 在肯定地位，但在滚动的其余局部，它又会进行 ” 粘 ” 住。作为一个每天都在应用 CSS 的人，作者无奈承受本人不能深刻了解这个问题的根本原因，所以决定深入研究 sticky 定位。

Stick 摸索

在尝试应用 sticky 定位的过程中，我很快发现，当一个具备 sticky 定位款式的元素被包裹起来，并且它是包裹元素内惟一的元素时，这个被定义为 sticky 定位的元素并不会 ” 粘 ” 住。

<!-- DOESN'T WORK!!! -->
<style>
    .sticky{
        position: sticky;
        top: 0;
    }
</style>
<div class="wrapper">
   <div class="sticky">
        SOME CONTENT
   </div>
</div>

当我在包裹元素内增加更多元素时，它开始失常工作了。

为什么？

这样做的起因是，当一个元素被赋予 sticky 定位款式时，粘性元素的容器是粘性元素能够粘住的惟一区域。这个元素没有其余元素能够浮动，因为它只能浮动在兄弟元素上，而作为惟一的子元素，它没有兄弟元素。

CSS Sticky 定位的真正工作原理！

CSS 的 sticky 定位有两个次要局部，即 粘性元素 和粘性容器。

粘性元素 – 是咱们应用 position: sticky 款式定义的元素。当视口地位与地位定义匹配时，元素将浮动，例如：top: 0px。

.some-component{
    position: sticky;
    top: 0px;
}

粘性容器——是包裹粘性我的项目的 HTML 元素。这是粘性我的项目能够浮动的最大区域。

当你应用 position: sticky 定义一个元素时，主动定义了父元素为粘性容器！

记住这一点十分重要！容器是粘性我的项目的作用域，我的项目无奈来到其粘性容器。

这就是后面例子中，粘性元素一开始就没有粘住的起因：粘性元素是粘性容器中惟一的子元素。

CSS Sticky 定位的视觉示例：

事例：https://codepen.io/elad2412/pen/QYLEdK

了解 CSS 的 Sticky 行为

就像我之前说的，CSS 的 Sticky 定位与其余所有 CSS 定位形式的行为都不同，但另一方面，它与它们也有一些相似之处。让我来解释一下：

Relative 定位（或 Static 定位）- 粘性定位元素相似于绝对定位和动态定位，因为它放弃 DOM 中的天然间隙（放弃在流中）。

Fixed – 当我的项目固定时，它的行为与 position: fixed 完全相同，浮动在视口的雷同地位，从流中移除。

Absolute 定位 – 在粘附区域的开端，元素进行并重叠在另一个元素的顶部，就像相对定位元素在 position: relative 容器内的行为一样。

贴在底部？

在大多数状况下，应用 position: sticky 以将元素固定在顶部，相似于这样：

.component{
    position: sticky;
    top: 0;
}

这正是它被创立进去的起因，因为在此之前，只能通过 JavaScript 来实现。

但你也能够应用它将元素粘贴到底部。这意味着能够定义页脚具备粘性地位，并且在向下滚动时始终会呈现粘在底部。当咱们达到粘性容器的开端时，元素将停留在其天然地位。最好将其用于天然地位为粘性容器底部的元素。

HTML

<main class="main-container">
  <header class="main-header">HEADER</header>
  <div class="main-content">MAIN CONTENT</div>
  <footer class="main-footer">FOOTER</footer>
</main>

CSS

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

事例地址：https://codepen.io/elad2412/pen/MZZVjw

Browsers Support

• 除旧版 IE 外，所有次要古代浏览器都反对粘性定位。
• 对于 Safari 浏览器，须要增加 -webkit 前缀。

position: -webkit-sticky; /* Safari */  
position: sticky;

代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

交换

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。