vue实现滚动条滚动到指定位置时,改变tab的颜色

1.需求

当页面滚动到淹没过tab底下下滑线的时候,标题栏的背景色由黑色变成白色,滑到显示下划线又由白色变成黑色

2.代码示例

mounted () {
    this.initScroll()
}
methods: {
  initScroll () {
    window.addEventListener('scroll', this.handleScrollColor)
  },
  // 至尊会员和会员的tab未遮住为黑色标题栏,反之,白色
  handleScrollColor () {
    // 获取元素到顶部的距离
    const elementHeight = this.$refs.memberCardTab.offsetTop + 
     this.$refs.checkLine[0].offsetTop + this.$refs.checkLine[0].offsetHeight
    // 获取滑动到顶部的距离
    const scrollHeight = window.pageYOffset || window.document.documentElement.scrollTop
    window.HXAppWeb.callNative('updateTitleColor',
      scrollHeight > elementHeight ? whiteObj : darkObj,
    )
  },
}

option的配置信息

// 暗色标题栏
export const darkObj = {
  titleBgColor: '#130814'
}
// 白色标题栏
export const whiteObj = {
  titleBgColor: '#FFFFFF'
}

思路是:先获取元素到顶部的距离,加上元素自身的高度, 与滚动条顶部的距离, 也就是下面最要的两个对比scrollHeight > elementHeight的对比

3.理解基本知识

offsetTop: 
表示元素针对上层控件的距离
(因为我这里memberCardTab上层控件是最大的元素,
checkLine是memberCardTab的子元素,也是定位元素,所以这两个数据相加)

offsetHeight: 
获取元素的高度

window.pageYOffset || window.document.documentElement.scrollTop:
滚动条滚动的距离

4.结果展示