Welcome toVigges Developer Community-Open, Learning,Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.7k views
in Technique[技术] by (71.8m points)

CSS 吸底样式

image.png

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

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Vigges Developer Community for programmer and developer-Open, Learning and Share
...