0%

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

Posted:2018.02.12

jQueryでスクロールと連動したコンテンツナビゲーションを実装する

まとめサイトなどでよく見かけるコンテンツの見出し項目に合わせたナビゲーションを実装していきます。ナビゲーションからコンテンツ位置までの移動はもちろん、スクロールした現在地に合わせてナビゲーションで確認できるようにします。

 

HTMLでページ内アンカーとナビゲーション部分を用意

まずは各コンテンツへのページ内アンカーが機能するようにしておきます。そして、それらのページ内アンカーに対応したナビゲーションをリストなどで作成しておきます。また初期設定としてナビゲーションの最初の項目には現在地を示すclassを充てておきます。

【HTML】※一部抜粋

<!-- コンテンツ部分 -->
<div id="content01">
</div>
<div id="content02">
</div>
<div id="content03">
</div>
<div id="content04">
</div>

<!-- ナビゲーション部分 -->
<ul id="nav">
  <li id="list01" class="current"><a href="#content01">コンテンツ1</a>
  </li>
  <li id="list02"><a href="#content02">コンテンツ2</a>
  </li>
  <li id="list03"><a href="#content03">コンテンツ3</a>
  </li>
  <li id="list04"><a href="#content04">コンテンツ4</a>
  </li>
</ul>

 

jQueryでコンテンツ位置とスクロール量を計算

次にjQueryで各コンテンツの位置とスクロール量を計算し、ナビゲーションを機能させていきます。ウィンドウサイズによってコンテンツ位置が異なる場合もありますので、それに対応できるようなイベントに設定しておきます。

$(window).on('load resize',function(){
  var pos01 = 0;
  var pos02 = Math.round($("#content02").offset().top);
  var pos03 = Math.round($("#content03").offset().top);
  var pos04 = Math.round($("#content04").offset().top);
  $(window).on('load resize scroll',function(){
    var posScroll = $(window).scrollTop();
    if(pos01 <= posScroll && posScroll < pos02) {
      $("#nav li").removeClass('current');
      $("#list01").addClass('current');
    } else if(pos02 <= posScroll && posScroll < pos03) {
      $("#nav li").removeClass('current');
      $("#list02").addClass('current');
    } else if(pos03 <= posScroll && posScroll < pos04) {
      $("#nav li").removeClass('current');
      $("#list03").addClass('current');
    } else if(pos04 <= posScroll) {
      $("#nav li").removeClass('current');
      $("#list04").addClass('current');
    }
  });
});

 

まずはそれぞれのコンテンツ位置を取得し変数に置き換えておきます。最初のコンテンツはページトップの場合は0になりますし、そうでない場合は他のコンテンツ同様、適宜コンテンツ位置を取得しておきます。

 

スクロールに合わせてスクロール量を取得し、それぞれのコンテンツ位置と比較しながら条件を設定していきます。そして対応するナビゲーションのリスト部分に現在地を示すclassを切り替えていくようにします。

 

今回の方法ですが、項目が多い場合にはコードが長くなってしまいますのでまた別のアプローチを考えた方が良さそうですが、手軽に実装したい場合などは十分活用できるかと思います。サンプルはこちらにありますのでご参考に!

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

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

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

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

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

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

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

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

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

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

CAPTCHA


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