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（虽然它很有帮助）。在这里做的最好的事情是利用奇妙的最小高度属性，而不是从文档总高度计算。

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;
  }

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

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

DEMO al la @Nick

<强> DEMO with more content

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

1 个答案: