CSS 吸底样式

CSS 吸底样式

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

  1. 当没有滚动条或者没有滚到底时fix在底部

  2. 滚到底部了 按照正常文档流限时 不要遮挡到正常内容

回答

监听滚动条是否达到底部，到达底部的时候添加对应类名，否则移除,来控制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("到了底部");
        } 
      }
  }

这个做法……不是不行，但为啥呢……

就正常 fixed 底部呗……正常的文档流底部留一个空白的 div 把高度撑起来、甚至直接 body 里再套一层写 padding-bottom 不就不会遮挡了么……

以上是 CSS 吸底样式 的全部内容， 来源链接： utcz.com/a/69159.html

回到顶部