css3 position:sticky 粘性元素区域悬浮效果

官方介绍:

position:static | relative | absolute | fixed | center | page | sticky

static:
对象遵循常规流。此时4个定位偏移属性不会被应用。
relative:
对象遵循常规流,并且参照自身在常规流中的位置通过toprightbottomleft这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。
absolute:
对象脱离常规流,此时偏移属性参照的是离自身最近的定位祖先元素,如果没有定位的祖先元素,则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素,其margin不与其他任何margin折叠。
fixed:
absolute一致,但偏移定位是以窗口为参考。当出现滚动条时,对象不会随着滚动。
center:
absolute一致,但偏移定位是以定位祖先元素的中心点为参考。盒子在其包含容器垂直水平居中。(CSS3)
page:
absolute一致。元素在分页媒体或者区域块内,元素的包含块始终是初始包含块,否则取决于每个absolute模式。(CSS3)
sticky:
对象在常态时遵循常规流。它就像是relativefixed的合体,当在屏幕中时按常规流排版,当卷动到屏幕外时则表现如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>

 

posted @ 2017-04-14 14:46  小时光  阅读(899)  评论(0编辑  收藏  举报