css3 position:sticky 粘性元素区域悬浮效果
官方介绍:
position:static | relative | absolute | fixed | center | page | sticky
- static:
- 对象遵循常规流。此时4个定位偏移属性不会被应用。
- relative:
- 对象遵循常规流,并且参照自身在常规流中的位置通过top,right,bottom,left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。
- absolute:
- 对象脱离常规流,此时偏移属性参照的是离自身最近的定位祖先元素,如果没有定位的祖先元素,则一直回溯到
body
元素。盒子的偏移位置不影响常规流中的任何元素,其margin不与其他任何margin折叠。 - fixed:
- 与
absolute
一致,但偏移定位是以窗口为参考。当出现滚动条时,对象不会随着滚动。 - center:
- 与
absolute
一致,但偏移定位是以定位祖先元素的中心点为参考。盒子在其包含容器垂直水平居中。(CSS3) - page:
- 与
absolute
一致。元素在分页媒体或者区域块内,元素的包含块始终是初始包含块,否则取决于每个absolute
模式。(CSS3) - sticky:
- 对象在常态时遵循常规流。它就像是
relative
和fixed
的合体,当在屏幕中时按常规流排版,当卷动到屏幕外时则表现如fixed
。该属性的表现是现实中你见到的吸附效果。(CSS3) - * CSS3新增属性可能存在描述错误及变更,仅供参考,持续更新
-
重点了解sticky属性值
-
当该元素在屏幕中时并不脱离文档流,仍然保留元素原本在文档流中的位置。
-
当元素在容器中被滚动超过指定的偏移值时,该元素将固定在容器指定的位置。例如:设置了top:50px;那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定,不再向上移动
-
元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素,如果祖先元素都不可以滚动,那么是相当于viewport(视口)来计算元素的偏移量
当目标元素在屏幕中可见时,他的行为就像position:relative;而当页面滚动超出目标区域时,他的表现就像position:fixed;它会固定在目标位置。
需要注意的是,如果同时定义了left和right值,那么left生效,right会无效,同样,同时定义了top和bottom,top赢
目前该属性需要私有前缀
.sticky { position: -webkit-sticky; position: -moz-sticky; position: -ms-sticky; position: sticky; top: 15px; // 使用和 Fixed 同样的方式设定位置 }
考虑到兼容性,可以使用js
<div class="header"></div> <style> .sticky{ position:fixed; top:0; } .header{ width:100%; background:#ccc; padding:25px 0; } </style> <script> var header = document.querySelector('.header'); var origOffsetY = header.offsetTop; function onScroll(e){ window.scrollY >= origOffsetY ? header.classList.add('sticky') : header.classList.remove('sticky'); } document.addEventListener('scroll', onScroll); </script>
-