vue中滚动页面，改变样式&&导航栏滚动时，样式透明度修改

最新推荐文章于 2024-05-09 04:36:54 发布

weixin_30700099

最新推荐文章于 2024-05-09 04:36:54 发布

阅读量4.7k

点赞数

文章标签： javascript 人工智能前端 ViewUI

原文链接：http://www.cnblogs.com/shuihanxiao/p/9890274.html

版权

vue中滚动页面，改变样式&&导航栏滚动时，样式透明度修改
.vue

<div class="commonHeader" v-bind:class="{ 'navActive': scrollFlag }">

<img src="@/images/home/icon_jdjr.png"  v-bind:class="{ 'scrollFlag': scrollFlag }">

data
scrollFlag:false,

mounted
window.addEventListener('scroll', this.handleScroll)

methods
handleScroll () {
  let _this=this;
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
  // console.log(scrollTop)
  if(scrollTop){
    _this.scrollFlag=true
  }else{
    _this.scrollFlag=false
  }
}

转载于:https://www.cnblogs.com/shuihanxiao/p/9890274.html