0%

Programmingプログラミングナレッジ

Posted:2017.09.30

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

スクロール時にヘッダーやフッター、またサイドバー固定の広告セクションなどを、一定の区域では固定で表示させ、ある区域に差し掛かれば固定表示を解除するという見せ方があります。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();
   });
});

 

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

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】