背景描述

图一：

图二：

图三：

页面初始化的时候显示图一的样子， 当向下滚动页面的时候图三红色区域要求吸顶。当点击“推荐”那一行的菜单时，路由发生变化，页面会刷新。此时要保证原先头部区域是吸顶的状态，页面刷新后还是吸顶的状态。这里的实现思路大致是： 借助sessionStorage, 保存状态，通过watch 来监听 $route， 获取sessionStorage 保存的状态。

问题

完成上面的工作后， 我以为一切正常，提给测试去测， 结果发现： 这个功能时好时坏，最终发现在滚动距离document.documentElement.scrollTop > 屏幕高度 的时候， document.documentElement.scrollTop = 0， 结果导致 this.fixedHeader = false， 因此，在前一个激活界面滚动超过屏幕的高度时，切换到新的菜单的界面， 头部菜单就无法吸顶， 恢复初始的状态

   // 页面滚动
    onScroll() {
      let top = document.body.scrollTop || document.documentElement.scrollTop;
      let winH = window.innerHeight || document.documentElement.clientHeight;
      let pageH = this.$el.offsetHeight;
      let diffH = pageH - top - winH;
      // this.waitTipFixed = top > 70;
      if (diffH < 35 && !this.pagination.loading && !this.pagination.finished) {
        this.onReachBottom({ type: 0 });
      }
      this.computedFixed(top);
      if (top > 150) {
        this.fixedHeader = true;
      } else {
        this.fixedHeader = false;
      }
      
      sessionStorage.setItem('channelNavStatus', this.fixedHeader)
      
    },

这时我尝试在页面刷新时，对 document.documentElement.scrollTop 重新设值， 可是结果还是 0

  watch: {
    $route: function (route) {
      let id = route.query.channelId;
      this.matchChannel(id);
      this.fixedHeader = sessionStorage.getItem('channelNavStatus') === 'true' ? true : false;
      this.$nextTick(() => {
        if (this.fixedHeader) {
         document.documentElement.scrollTop = 160
        }
      })
   
    },
  },

我经过一番折腾，始终无果， 于是我向大佬求助。 大佬就是大佬，三加五除二，没两下就找出了问题，棒棒！！

解决方法：在这个资讯列表的div加上一个最小高度， 一般设置为屏幕的高度。

结语

特此记录，工作中遇到的问题，希望能给遇到相同问题的亲们，一点思路！ 路过点个赞哟，码字不易！！谢谢