Vue监听滚动事件

最新推荐文章于 2024-06-25 10:16:12 发布

Renners

最新推荐文章于 2024-06-25 10:16:12 发布

阅读量462

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Renners/article/details/125989453

版权

需求：页面滚动改变顶部导航样式

原样式：导航透明，显示底部广告位

滚动后样式：出现黑色透明遮罩

代码实现：

    <a-layout-header  :style="{ position: 'fixed', zIndex: 1, width: '100%',background:topNav}">
//这里是业务代码
   </a-layout-header>

<script>
import { defineComponent, ref } from 'vue';
import homePage from '../../components/HomePage/HomePage.vue';

export default defineComponent({
  setup() {
   var topNav =ref('rgba(0, 0, 0,0)');
    return {
	  topNav,
      selectedKeys: ref(['1']),
    };
  },
  components: {
	  homePage,
  },
  mounted(){
	     window.addEventListener('scroll',this.handleScroll)
  },
  methods:{
	    handleScroll(){
	     var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop ;// 滚动条偏移量
	      this.topNav = scrollTop > 64 ? 'rgba(0, 0, 0,0.85)' : 'rgba(0, 0, 0,0)';
	  　　console.log(this.topNav);
	    }
  }
});
</script>