vue 吸顶和吸底

1.顶吸

需求：某个元素要在滚动列表的时候吸住顶部
 mounted() {
    window.addEventListener("scroll", this.suckTopFunc);
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.suckTopFunc);
  },
methods:{
  suckTopFunc() {
 let offsetTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      //offsetTop是滚动条到顶部的距离
      if (offsetTop >= 110) {
       //在这里做操作
      } else {
      //在这里做操作
      }
  }
}

2.吸底

需求：有个列表，但是底部需要自己加总计数据的div，并且始终处在底部
思路：通过标识元素判断，视口是否显示到了列表的最下方，
如果显示到了，则总计的盒子按照正常文档流显示，
如果没有显示，则总计的盒子position:fixed到页面底部
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
......
</ul>
  // 这里可以加个标识用的元素，用来判断页面是否滚动到列表最下方
<div class="tips" ref="tips"></div>
<div :class="isFixed ? 'fixed-style' : ''">
总计：5
</div>
data () {
return {
isFixed: false
  }
},
   beforeDestroy() {
    window.removeEventListener("scroll", this.handlerScroll);
  },
mounted(){
 this.$nextTick(() => {
      window.addEventListener("scroll", this.handlerScroll);
    });
 },
methods:{
 handlerScroll() {
//在这传入标识元素的节点，用$refs获取
      this.isFixed = this.isElementNotInViewport(this.$refs.tips) ? true : false;
    },

// 在这判断，总计的div是否显示在页面中
 isElementNotInViewport (el) {
    let rect = el.getBoundingClientRect();
    return (
      rect.top >= (window.innerHeight || document.documentElement.clientHeight) ||
      rect.bottom <= 0
    );
  };
  }