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>