0

そのため、私はかなり長い間、スティッキー フッターの確実な解決策を探していました。すべてのページとすべてのブラウザーでうまく機能するものを見つけました。ただし、ロードしてから有効になるまでに時間がかかります。これをスピードアップする方法はありますか？ページがロードされる前にロードするかもしれませんか？onLoadの代わりに「onDOMready」に設定できると誰かが言いましたか？それは理にかなっていますか？

とにかく、ここに私のコードがあります：

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

読み込みを速くするにはどうすればよいですか?

4

1 に答える 1

3

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

より多くのコンテンツを含むデモ

于 2013-02-01T16:37:37.757 に答える