OWNED MEDIAウェブ制作に役立つコンテンツを発信中!

jQueryで特定の位置で切り替わるスクロール時の固定と解除を切り替え

最終更新日:2018.1.7 Update!!
スクロール時にヘッダーやフッター、またサイドバー固定の広告セクションなどを、一定の区域では固定で表示させ、ある区域に差し掛かれば固定表示を解除するという見せ方があります。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();
   });
});
  いろんなウェブサイトでも使っているところが多く、あると役に立つ機能ではないでしょうか。このサンプルはこちらからご確認いただけます。
  • はてなブックマーク
  • Pocket
  • Linkedin
  • Feedly

この記事を書いた人

Twitter

SPONSORED

    KEYWORD SEARCH

    RECENT POSTS

    合同会社デザインサプライ -DesignSupply. LLC-

    サイト制作・開発 / 各種デザイン制作 / ウェブプロモーション企画

    合同会社デザインサプライ(DesignSupply. LLC)

    Office:大阪府大阪市天王寺区清水谷町3-22
    Email:info@designsupply-web.com
    • Twitter
    • Github
    CONTACT USSCROLL TO TOP
      • Facebook
      • Twitter
      • Github
      • Instagram