VUE滚动监听

zhangli0421

于 2022-02-21 15:19:15 发布

阅读量555

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/zhangli0421/article/details/123047954

版权

本文详细介绍了在Vue.js应用程序中如何实现滚动监听，并探讨了相关实现技巧和最佳实践，帮助开发者创建响应式滚动效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div class="home">
    <div ref="header" class="header-bg" :class="headerFixed?'issFixed':''">Header</div>
    <div style="height: 500px">111</div>
    <div style="height: 3000px">
        222
        <h1 :class='tx ? "animate__animated animate__backInUp" : ""'>An animated element</h1>
    </div>
    <div>333</div>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      offsetTop: 0,
      offsetHeight: 0,
      headerFixed: 0,
      tx:false
    };
  },
  mounted() {
    this.$nextTick(() => {
        
      // 获取吸顶元素的dom
      let header = this.$refs.header;
      // 吸顶元素到top的距离
      this.offsetTop = header.offsetTop;
      // 元素自身的高度
      this.offsetHeight = header.offsetHeight;

      // 监听

最低0.47元/天解锁文章