VUE实现滚动监听导航栏置顶的方法

 
资源信息

 

  
 

 

  
  
  
  
 

 

  
 

 

data () {
 paddingBottom: '1.5rem', // 给最外层div一个padding-bottom
 // 因为footer是fixed定位 如果padding-bottom为0 数据列表拉到最下面的时候 会有部分数据被footer挡住

 isFixed: false, // bar浮动
 offsetTop: 0, // 触发bar浮动的阈值
 marginTop: 0, // 触发bar浮动的同时 给数据列表一个margin-top 防止列表突然上移 会很突兀

 advertShow: true, // 广告显示
}

mounted () {
 // 设置初始的 padding-bottom 值为 footer 的高度 +20 防止数据列表拉到最下面被footer挡住 +多少自定
 this.paddingBottom = document.querySelector('.footer').offsetHeight + 20 + 'px';

 // 设置bar浮动阈值为 #fixedBar 至页面顶部的距离
 this.offsetTop = document.querySelector('#fixedBar').offsetTop;

 // 开启滚动监听
 window.addEventListener('scroll', this.handleScroll);
}

methods: {
 // 关闭广告
 del () {
  this.advertShow = true;
  this.$nextTick(() => {
   this.paddingBottom = document.querySelector('.footer').offsetHeight + 20 + 'px';
  });
 },

 // 滚动监听 滚动触发的效果写在这里
 handleScroll () {
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

  if (scrollTop >= this.offsetTop) {
   this.isFixed = true;
   this.marginTop = document.querySelector('#fixedBar').offsetHeight + 'px';
  } else {
   this.isFixed = false;
   this.marginTop = 0;
  }
 }
}

destroyed () {
 window.removeEventListener('scroll', this.handleScroll); // 离开页面 关闭监听 不然会报错
}