滚动吸顶效果的实现方式

实现方式

1.使用 position:sticky 实现

2.使用 JQuery 的 offset().top 实现

3.使用原生的 offsetTop 实现

一、使用 position:sticky 实现

1.什么是sticky（粘性定位）

粘性定位 sticky 相当于相对定位 relative 和固定定位 fixed 的结合；在页面元素滚动过程中，某个元素距离其父元素的距离达到 sticky 粘性定位的要求时；元素的相对定位 relative 效果变成固定定位 fixed 的效果。

2.如何使用？

使用条件

1.父元素不能 overflow:hidden 或者 overflow:auto 属性;
2.必须指定 top、bottom、left、right 4 个值之一，否则只会处于相对定位
3.父元素的高度不能低于 sticky 元素的高度
4.sticky 元素仅在其父元素内生效

在需要滚动吸顶的元素加上以下样式便可以实现这个效果：
1
2
3
4
5
.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

二、使用 JQuery 的 offset().top 实现

我们知道 JQuery 中封装了操作 DOM 和读取 DOM 计算属性的 API，基于 offset().top 这个 API 和 scrollTop() 的结合，我们也可以实现滚动吸顶效果。

 window.addEventListener('scroll', self.handleScrollOne);
...
handleScrollOne: function() {
    let self = this;
    let scrollTop = $('html').scrollTop();
    let offsetTop = $('.title_box').offset().top;
    self.titleFixed = scrollTop > offsetTop;
}

三、使用原生的 offsetTop 实现

我们知道 offsetTop 是相对定位父级的偏移量，倘若需要滚动吸顶的元素出现定位父级元素，那么 offsetTop 获取的就不是元素距离页面顶部的距离。

我们可以自己对 offsetTop 做以下处理：

 getOffset: function(obj,direction){
    let offsetL = 0;
    let offsetT = 0;
    while( obj!== window.document.body && obj !== null ){
        offsetL += obj.offsetLeft;
        offsetT += obj.offsetTop;
        obj = obj.offsetParent;
    }
    if(direction === 'left'){
        return offsetL;
    }else {
        return offsetT;
    }
}
 ```  
##### 使用  
```js
window.addEventListener('scroll', self.handleScrollTwo);
...
handleScrollTwo: function() {
    let self = this;
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    let offsetTop = self.getOffset(self.$refs.pride_tab_fixed);
    self.titleFixed = scrollTop > offsetTop;
}