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

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

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

 

posted @ 2019-05-22 21:18  xiiiiiimi  阅读(958)  评论(0编辑  收藏  举报