VUE根据滚动条与顶部的距离固定左侧导航栏

在有顶部导航栏的情况下，呈现左侧导航栏固定的效果不能简单地使用fixed来实现，因为当滚动条下拉时导航栏菜单也需要改变位置，而不是固定在页面的某一位置。

页面效果

1.滚动条处于顶部

2.滚动条下拉到一定位置

 

实现代码

css

  .left{
    height:100%;
    width:210px;
    position: absolute;
  }
  #nav{
    position: absolute;
    top:0px;
    width:209px;
    height: 100%;
  }

滚动条监听事件

使用生命周期函数mounted添加滚动条监听事件 handleScroll为执行的方法

  mounted() {
    window.addEventListener('scroll', this.handleScroll)
  }

在methods中定义handleScroll方法

handleScroll() {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      const nav = document.getElementById('nav')
      if (scrollTop >= 0 && scrollTop < 171) {
        nav.style.top = '0px'
      } else {
        nav.style.top = scrollTop - 171 + 'px'
      }
    }

顶部导航栏的高度为171px，scrollTop为滚动条到顶部的距离

左侧导航栏为两层，外层left固定在页面中，内层nav会随滚动条下拉而改变位置。