CSS 吸底样式

Question

有一个这样的样式，红框标出的是footer，我的想法是

1. 当没有滚动条或者没有滚到底时fix在底部
2. 滚到底部了 按照正常文档流限时 不要遮挡到正常内容

Answer 1

监听滚动条是否达到底部，到达底部的时候添加对应类名，否则移除,来控制footer的position方式。
监听方式：

mounted () {
    let _this = this;
    window.onscroll = function(){ //变量scrollTop是滚动条滚动时，距离顶部的距离
      var scrollTop = document.documentElement.scrollTop||document.body.scrollTop; //变量windowHeight是可视区的高度
      var windowHeight = document.documentElement.clientHeight || document.body.clientHeight; //变量scrollHeight是滚动条的总高度
      var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight; //滚动条到底部的条件
        if(scrollTop+windowHeight == scrollHeight){ 
          _this.footerText = '我是有底线的';
          console.log("到了底部");
        } 
      }
  }