子菜单吸顶(滚动到一定距离 容器置顶)附 无间断置顶 避免闪动

思考逻辑:当向上滚动的高度>= 观察容器距离顶部高度 即可触发吸顶

以下代码在vue工程,作参考 

    handleScroll () {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop //向上滚动的高度
      const offsetTop = document.querySelector('.swiper_con').offsetTop //观察容器距离顶部的高度
      if (scrollTop > offsetTop) { //逻辑判断 
        this.isFixed = true
      } else {
        this.isFixed = false
      }
    }

记得在mounted 中加入监听事件  

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

  

附赠无闪烁(噱头 哈哈哈)

其实就是给内容容器一个padding-top,然后将子菜单 相对定位在内容容器中。上面代码中观察容器选用 内容容器的className。

猜你喜欢

转载自www.cnblogs.com/ximiximi-blog/p/10908584.html