vue监听滚动事件-元素固定位置显示

1、监听滚动事件

用VUE写一个在控制台打印当前的scrollTop用来测试是否执行：

mounted () {

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

}

methods:  {

  handleScroll () {

    var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop

    console.log(scrollTop)

  }

}

2、监听元素到顶部的距离并判断滚动的距离如果大于了元素到顶部的距离时，为元素添加 isFixed的class

handleScroll () {

  var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop

  var offsetTop = document.getElementById('bar').offsetTop

  if (scrollTop > offsetTop) {

    this.barFixed = true

  } else {

    this.barFixed = false

  }

}

.isFixed{

   position:fixed;

   background-color:#Fff;

   top:0;

   z-index:999;

}

<div :class="{isFixed: barFixed}"></div>

PS：如果离开页面需要移除这个监听的事件

destroyed () {

  window.removeEventListener('scroll', this.handleScroll)

}

总结：整体思路为监听滚动距离是否大于元素到顶部的距离，来判断是否为元素添加固定css样式.

巴特西

vue监听滚动事件-元素固定位置显示

最新文章

热门文章