关于滚动吸顶的方法

第一种使用CSS中的position:sticky 实现

使用条件：

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

    例如：

    1
    2
    3
    4
    5
    .nav {
         position: -webkit-sticky; 
         position: sticky;
         top: 0; 
    }

兼容性

并不是很好因为这个 API 还只是实验性的属性。不过这个 API 在 IOS 系统的兼容性还是比较好的。

使用Jquery 的 offset（）.top 实现

1
2
3
4
5
6
7
8
window.addEventListener('scroll',self.handleScrollone);
....
handleScrollone: function( ) {
    let self = this;
    let scrrollTop = $('html').scrollTop( ); //获取滚动高度
    let offsetTop = $('.title_box').offset( ).top;    //盒子高度
    self.titleFixed = scrollTop > Top;    //判断滚动高度是否大于盒子高度
}

使用原生JavaScript 实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
window.addEventListener('scroll',Navflexd);
Navflexd:function( ){
    let scrollTop = document.documentElement.scrollTop;
    //需要定位的距离 
    let    navigatorBarTop = 需要定位的距离；
    //判断滚动距离大于定位距离就定位
    //获取当前浏览器是否在定位状态如果和上一步结构不一样就执行下面
    if（设定好的定位值 ！== 导航需要定位距离）{
        //更新设定好的值  
        X = Y;
        //获取需要定位的元素
        //判断是否需要定位if（导航需要定位距离）classname上添加上active
    }
}

第二种

  • 说明：vm.$refs 一个对象，持有已注册过 ref 的所有子组件（或HTML元素）
  • 使用：在 HTML元素 中，添加ref属性，然后在JS中通过vm.$refs.属性来获取
  • 注意：如果获取的是一个子组件，那么通过ref就能获取到子组件中的data和methods
    1
    2
    3
    4
    5
    6
    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.prode_tab_fixed);
        self.titleFixed = scrollTop > offsetTop;

###

使用 obj.getBoundingClientRect().top 实现 MDN)

定义：

这个 API 可以告诉你页面中某个元素相对浏览器视窗上下左右的距离。

使用：
tab 吸顶可以使用 obj.getBoundingClientRect().top 代替 scrollTop - offsetTop,代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// html
<div class="pride_tab_fixed" ref="pride_tab_fixed">
    <div class="pride_tab" :class="titleFixed == true ? 'isFixed' :''">
        // some code
    </div>
</div>

// vue
export default {
    data(){
      return{
        titleFixed: false
      }
    },
    activated(){
      this.titleFixed = false;
      window.addEventListener('scroll', this.handleScroll);
    },
    methods: {
      //滚动监听，头部固定
      handleScroll: function () {
        let offsetTop = this.$refs.pride_tab_fixed.getBoundingClientRect().top;
        this.titleFixed = offsetTop < 0;
        // some code
      }
    }
  }
复制代码

offsetTop 和 getBoundingClientRect() 区别

1. getBoundingClientRect():

该**Element.getBoundingClientRect()**方法返回元素的大小及其相对于视口的位置。。

该函数返回一个 object 对象，有6个属性： top, right, buttom, left, width, height。 (在 IE 中，默认坐标从(2,2)开始计算，只返回 top,lef,right,bottom 四个值)

2. offsetTop:

用于获得当前元素到定位父级（ element.offsetParent ）顶部的距离（偏移值）。