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

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

以下代码在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。

 

转载于:https://www.cnblogs.com/ximiximi-blog/p/10908584.html