屏幕滚动，悬浮窗的实现

技术栈

vue、jq都写过

api

先认识几个api

• List item

offsetTop：

元素顶部相对于包含元素的距离，这对于元素是嵌套层级时会有些难办，如想获取元素对于body的距离，得想好布局层级，减少一些计算。

• getBoundingClientRect()

：方法返回元素的大小及其相对于视口的位置。所以top会随着屏幕滚动而改变

• scrollHeight:

Element.scrollHeight 这个只读属性是一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容。
scrollHeight 的值等于该元素在不使用滚动条的情况下为了适应视口中所用内容所需的最小高度。 没有垂直滚动条的情况下，scrollHeight值与元素视图填充所有内容所需要的最小值clientHeight相同。包括元素的padding，但不包括元素的border和margin。scrollHeight也包括 ::before 和 ::after这样的伪元素。值会被四舍五入

• offsetHeight

是一个只读属性，它返回该元素的像素高度，高度包含该元素的垂直内边距和边框，且是一个整数。是css高度的衡量标准

1. clientHeight 包括padding但不包括border、水平滚动条、margin的元素的高度
2. window.screen.height：屏幕纵向分辨率 window.screen.availHeight：屏幕可用工作区高度
3. document.documentElement.clientHeight：文档的可见高度

效果：底部的footer-box元素未进入可视区域前，foot-banner-inner都是悬浮状态，进入可视区后是回到原来位置，不随着窗口滚动而滚动

  mounted() {
      this.$nextTick(() => {
      this.countEle();
      window.addEventListener("resize", this.countEle);
       window.addEventListener("scroll", this.handlerScroll)
       //假如有比较多的静态资源，特别是视频，要在资源全部加载完成后获取目标元素的offsetTop才是准确的
       document.addEventListener("readystatechange", this.changeState);
	})
}
//做些元素的计算，避免在滚动时多次重复计算，影响性能，resize时也需要重新计算一次
  countEle() {
  //注意不要用window.screen.height
  
    this.winH = document.documentElement.clientHeight;
    if (document.readyState == "complete") {
      let ele = <HTMLElement>(
        document.getElementsByClassName("footer-box")[0]
      );
      this.footTop = ele.offsetTop;
    }
  }
//处理滚动
  handlerScroll() {
    let scrollTop = document.documentElement.scrollTop;
    let ele1 = 
        document.getElementsByClassName("footer-box")[0];
      this.footTop = ele1.offsetTop;
     //footer-box 中需要悬浮的元素容器，footer-box占位，不脱离标准流的
    let ele = 
      document.getElementsByClassName("foot-banner-inner")[0];
    if (scrollTop >= this.footTop - this.winH) {
      if (this.fPosition !== "inherit") {//避免多次修改data
        this.fPosition = "inherit";
      }
    } else {
      if (this.fPosition !== "fixed") {
        this.fPosition = "fixed";
      }
    }
  }
  //资源加载状态
    changeState() {
    if (document.readyState == "complete") {
      let ele = <HTMLElement>(
        document.getElementsByClassName("footer-box")[0]
      );
      this.footTop = ele.offsetTop;
      this.state = 0;
    }
  }
  //注意移除监听器
  destroyed() {
    window.removeEventListener("scroll", this.handlerScroll);
    window.removeEventListener("resize", this.countEle);
    document.removeEventListener("readystatechange", this.changeState);
  }