vue 项目 监听页面滚动并固定元素到顶部

发表于 | 分类于 | 评论数： | 阅读次数：

一个常见的需求,页面滚动过一段距离后将某个元素固定在页面顶端,常见于固定长表格的表头

实现:

1. 监听滚动距离

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
29
30
31
32
33
34
35
36

//项目初始化时监听滚动事件


data(){
    return {

        isFixed:false
    }
}
mounted() {

    window.addEventListener("scroll", this.handleScroll);
  },

//摧毁组件时取消监听
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  }


methods:{
    handleScroll() {
    //获取 ref 为 mainContainer 的 dom 到屏幕顶端的距离
      let offsetTop = this.$refs.mainContainer.offsetTop;
      //兼容性获取滚动高度
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

      //根据滚动距离判断是否需要固定 dom
      if (offsetTop - scrollTop < 0) {
        this.isFixed = true;
      } else {
        this.isFixed = false;
      }
    }
}

2. 为 dom 添加动态 class

1
<div :class="isFixed?'fixed':''"></div>

3.配置 fixed 样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* main.scss */
.fixed {
  width: 96%;
  position: fixed;
  background-color: #fff;
  height: 30px;
  top: 0;
  left: 0;
  font-size: 14px;
  font-weight: 900;
  padding-top: 4px;
  padding-left: 2%;
  padding-right: 2%;
  //   z-index: 9;
}

4.tip

1

使用 this.$refs时必须确保 dom 已经渲染,例如放在 v-else
中切条件为 true 时是无法获取到 dom 的.

2

针对默认表格固定 thead 以后 tbody 中数据样式错乱的问题,可以再添加一个表头,在超过预设滚定距离以后显示,并固定在页面顶端.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<table class="table" border="0" cellspacing="0" cellpadding="0">
  <div v-show="isFixed" :class="isFixed?'fixed':''">
    <div class="flex center">
      <div>排名</div>
      <div style="width:110px">{{activeIndex==0?"微信号文章":"微博"}}</div>
    </div>
  </div>
  <thead >
    <tr>
      <th>排名</th>
      <th class="title">微信号文章</th>
      <th>阅读数</th>
      <th>在看数</th>
      <th>点赞率</th>
    </tr>
  </thead>
</table>
thank u !