スクロール時にヘッダーやフッター、またサイドバー固定の広告セクションなどを、一定の区域では固定で表示させ、ある区域に差し掛かれば固定表示を解除するという見せ方があります。jQueryを使って実装できるのですが、備忘録としてのメモです。

スクロールに合わせたセクションの固定と解除

要素はヘッダーやフッター、またそれ以外のセクションなどがあるのですが、基本的にはその要素のトップからの位置を取得してスクロールの値を比較し、トップからの位置にスクロールの値が超えたタイミングで、CSSのpositionで固定（fixed）か通常表示（static）を切り替える仕組みになります。ポイントとなるのは、固定と初期表示を切り替える要素を囲う親要素をそれぞれ設置することです。

以下は、ある位置に差し掛かったら固定表示されるヘッダーと、デフォルトで固定表示になっているフッターがある位置に差し掛かったら通常表示に変わるサンプルです。

【HTML】（一部抜粋）

<div id="wrap-static-fixed">
   <header class="static-fixed-style" id="static-fixed">
   </header>
</div>

〜 省略 〜

<div id="wrap-fixed-static">
   <footer class="fixed-static-style" id="fixed-static">
   </footer>
</div>

【CSS】（一部抜粋）

#wrap-static-fixed,
#wrap-fixed-static {
  width: 100%;
  height: 60px;
}
.static-fixed-style {
  position: static;
  width: 100%;
  height: 60px;
  z-index: 100;
  background: #f1afaf;
}
.static-fixed-style.fixed {
  position: fixed;
  top: 0;
  left: 0;
}
.fixed-static-style {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background: #b1c8f3;
}
.fixed-static-style.static {
  position: static;
}

【javascript】

$(function(){
   var staticFixedElem = $("#static-fixed");
   var staticFixedContent = $("#wrap-static-fixed");
   var contentTopStaticFixed = 0;
   var fixedStaticElem = $("#fixed-static");
   var fixedStaticContent = $("#wrap-fixed-static");
   var contentTopFixedStatic = 0;
   var win = $(window);
   function staticFixedPos() {
     contentTopStaticFixed = staticFixedContent.offset().top;
   }
   function staticFixedEffect() {
     if( win.scrollTop() > contentTopStaticFixed ){
       staticFixedElem.addClass("fixed");
     } else if( staticFixedElem.hasClass("fixed") ) {
       staticFixedElem.removeClass("fixed");
     }
   }
   function fixedStaticPos() {
     contentTopFixedStatic = fixedStaticContent.offset().top + fixedStaticElem.outerHeight();
   }
   function fixedStaticEffect() {
     if( win.scrollTop() + win.height() > contentTopFixedStatic ){
       fixedStaticElem.addClass("static");
     } else if( fixedStaticElem.hasClass("static") ) {
       fixedStaticElem.removeClass("static");
     }
   }
   $(window).on('load resize scroll', function(){
     staticFixedPos();
     staticFixedEffect();
     fixedStaticPos();
     fixedStaticEffect();
   });
});

いろんなウェブサイトでも使っているところが多く、あると役に立つ機能ではないでしょうか。このサンプルはこちらからご確認いただけます。