如何加快 jQuery 粘性页脚的加载时间？

Question

所以很长一段时间以来，我一直在为粘性页脚寻找可靠的解决方案。我发现了一个在每个页面和每个浏览器上都运行良好的；但是需要一些时间才能加载然后生效。有没有办法可以加快速度？也许在页面加载之前加载它？有人提到它可以设置为“onDOMready”而不是onLoad？这有意义吗？

无论如何，这是我的代码：

<script>
function positionFooter() { 
    var mFoo = $("#myfooter"); 
    if ((($(document.body).height() + 
            mFoo.height()) < $(window).height() && 
            mFoo.css("position") == "fixed") || 
            ($(document.body).height() < $(window).height() && 
            mFoo.css("position") != "fixed")) 
    { 
            mFoo.css({ position: "fixed", bottom: "0px" }); 
    } 
    else 
    { 
            mFoo.css({ position: "static" }); 
    } 
} 

    $(document).ready(function () { 
            positionFooter(); 
            $(window).scroll(positionFooter); 
            $(window).resize(positionFooter); 
            $(window).load(positionFooter); 
    });
</script>

<!--content --->

<div id="myfooter" style="width:100%;"><!--footer content--></div>

如何让它加载更快？

Answer 1

不需要 javascript（尽管它很有帮助）。最好的办法是利用奇妙的 min-height 属性，而不是从总文档高度计算。

html

  <div id="wrap">
       <div id="content">
       <footer></footer>
  </div>

css

  html,body{
      height:100%;
  }
  #wrap{
       min-height:100%;
       position:relative;      
  }

  #content{
       padding-bottom:20px; // allow room for footer
  }
  footer{
       position:absolute;
       width:100%;
       bottom:0;
       left:0;
       height:20px;
  }

由于您的页面可能比这更复杂，如果您发现 min-height:100% 单独在 css 中没有产生所需的结果，您可能需要使用 javascript 进行设置。

  $(document).ready(function(){
       var $window = $(window),
           $wrap = $('#wrap'),
           setMinHeight = function(){
                $wrap.css('min-height',$window.height());
           };
           setMinHeight();
           $window.resize(setMinHeight);
  });

DEMO 还是@Nick

DEMO with more content