乐趣区

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

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

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

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

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

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

直到 3 年前,有四个 CSS 地位:staticrelativeabsolutefixed

staticrelativeabsolutefixed 之间的次要区别在于它们在 DOM 流中占用的空间。staticrelative 保留其在文档流中的天然空间,而 absolutefixed 则不保留空间,它们具备浮动行为。而新的 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 已收录,有一线大厂面试残缺考点、材料以及我的系列文章。

退出移动版