vue 监听页面滚动 实现元素吸顶或者固定位置

在Vue中实现元素吸顶或固定位置的方式是通过监听页面滚动事件并动态改变元素的样式或位置。具体步骤如下：

1. 在Vue的组件中，通过`mounted`钩子函数监听页面滚动事件：

mounted() {
  window.addEventListener('scroll', this.handleScroll);
}

2. 在`methods`中定义`handleScroll`方法来处理滚动事件，并使用`scrollTop`属性获取页面滚动位置：

methods: {
  handleScroll() {
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    // 根据scrollTop的值来决定元素的样式或位置
    // ...
  }
}

3. 在模板中，使用动态绑定的方式来设置元素的样式或位置。可以通过绑定CSS类名或行内样式实现，以下是两种常见的实现示例：

- 使用CSS类名：
在data中定义一个`isFixed`变量，根据滚动位置的条件来切换`isFixed`的值，在模板中绑定CSS类名根据`isFixed`的值设置元素的样式：

data() {
  return {
    isFixed: false,
  };
},
methods: {
  handleScroll() {
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    // 根据scrollTop的值来判断是否满足条件，如果满足条件则设置isFixed为true，否则为false
    this.isFixed = scrollTop > 100;
  },
},

在模板中绑定CSS类名，并设置元素的样式：

<div :class="{ 'fixed': isFixed }">固定的元素</div>

<style>
.fixed {
  position: fixed;
  top: 0;
  left: 0;
}
</style>

- 使用行内样式：
直接通过绑定`style`属性来设置元素的样式：

data() {
  return {
    topPosition: 0,
  };
},
methods: {
  handleScroll() {
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    // 根据scrollTop的值来判断是否满足条件，如果满足条件则设置topPosition为固定的位置，否则为0
    this.topPosition = scrollTop > 100 ? '100px' : '0';
  },
},

在模板中绑定行内样式：

<div :style="{ top: topPosition }">固定的元素</div>

通过以上步骤就可以实现元素吸顶或固定位置的效果了。