网站首页 javascript技术

footer--自动固定在底部

发布时间：2017-08-16 07:47查看次数：4416

footer--自动固定在底部

HTML 代码


<footer class="mui-bar-footer">
   <div class="mui-bar-footer Bg MyBlock">
      <div class="mui-text-center">
       <h6 style="color:yellowgreen">火爆网络深圳分公司</h6>
     <p>版权所有:火爆科技</p>
    </div>
 </footer>




js代码 需要先引入Jquery

$(function() {
      function footerPosition() {
      $("footer").removeClass("fixed-bottom");
       var contentHeight = document.body.scrollHeight, //网页正文全文高度
       winHeight = window.innerHeight; //可视窗口高度，不包括浏览器顶部工具栏
      if(!(contentHeight > winHeight)) {
       //当网页正文高度小于可视窗口高度时，为footer添加类fixed-bottom
        $("footer").addClass("fixed-bottom");
        } else {
       $("footer").removeClass("fixed-bottom");
       }
      }
      footerPosition();
      $(window).resize(footerPosition);
    });