WebDesign Dackel

jQueryを使って一定のスクロール位置に来たら、フッターを固定・解除する


よくあるUIで、サンプルや実装方法は他のサイト様でもよく紹介されていたのですが、フッターを固定・解除するものを実装している時に見事にハマったので、ハマった箇所、実装方法を合わせてメモしておこうと思います。

簡単なものですが、サンプルを用意しました。

DEMO

画面下に配置されていた、フッター部分が、最後までスクロールすると、標準の配置に切り替わります。

実装方法

HTMLの構造はこんな感じ。

<div class="footer">
     <div class="footer-top">
          <p>テキスト</p>
          <ul>
               <li>要素</li>
               ...
          </ul>
     </div>
     <div class="footer-bottom"></div>
</div>

最低限のCSSは以下。

.footer-top {
     position:fixed;
     bottom:0;
     left:0;
     overflow:hidden;
     width:100%;
     height:30px;
     }

.footer-top.static {
     position:static;
     }

.footer-bottom {
     padding:15px 0;
     }

.footer {
     height:100px;
     width:100%;
     overflow:hidden;
     } 

ポイントはフッターの高さを予め決めておくことと、標準配置用のスタイルを準備しておくことくらいです。
JSは以下です。

$(function(){


     var $elem = $(".footer-top"), //表示の操作をするオブジェクト(フッター)
               $content = $(".footer"), //表示を変更する基準となるオブジェクト
               $win = $(window); //windowオブジェクト

     var contentTop = 0; //表示変更をする基準点


     $win
          .load(function(){
               updatePosition();
               update();
          })
          .resize(function(){
               updatePosition();
               update();
          })
          .scroll(function(){
               update();
          });


     // HTMLが動的に変わることを考えて、contentTopを最新の状態に更新します
     function updatePosition(){
          contentTop = $content.offset().top + $elem.outerHeight();
     }


     // スクロールのたびにチェック
     function update(){
          // 現在のスクロール位置 + 画面の高さで画面下の位置を求めます
          if( $win.scrollTop() + $win.height() > contentTop ){
               $elem.addClass("static");
          }else if( $elem.hasClass("static") ){
               $elem.removeClass("static");
          }
     }


}); 

動作の基本は、基準となる要素の座標までスクロールしたら標準配置用のクラスを当てるといった感じです。
今回はフッターを操作するので、画面下の座標を求めて、要素と比較します。

scrollresizeイベントではそれぞれ座標を求めて、描画の更新を行います。

ハマった箇所

と、ここまでは他のサイトを参考にしつつすぐに実装出来たのですが、なんだか切り替わりの際に位置がずれてしまっていました。

ずれてしまっていた原因は、$(function(){});でした。
DOMの構築が終わっても、画像などを大量に使っていた場合、contentTopの値が実際の値とずれていたためです。
$(window).load()を使ってページの読み込みを待つことで正確な値で取得出来て、スムーズに切り替わってくれました。


Twitter Facebook Hatena Google+ Pocket

Comments