[ ブックマーク ] スクロールイベントに重宝する『jQuery Waypoints』プラグイン

ブラウザをスクロールした際に何かの動作をしたいということは多々あるとは思うのですが、この『jQuery Waypoints』プラグインを使えばかなり簡単にコードを簡素化できます。参考までに、『jQuery Waypoints』プラグインを使用した場合と使用しないでjQueryの記法のみで実装した場合で、コードがどのくらい違うか比較してみます。

『jQuery Waypoints』プラグインのダウンロードは以下のサイトからどうぞ。

色々とできるのですが、今回は、

  • コンテンツ固定
  • ペラサイト(1ページサイト)におけるメニューハイライト

のふたつを紹介します。

コンテンツ固定

共通のHTMLは以下のとおりです。

<div class="wrap">
<head>
   <h1>コンテンツ固定サンプル<br>(jQuery Waypoints使用)</h1>
</head>
<div class="my-sticky-element">Sticky Elements</div>
<div class="contents">
   <p>text</p>
   …
   <p>text</p>
</div>
</div>

『jQuery Waypoints』不使用バージョン

DOMO

Java Script

$(function() {
   var sticky = $('my-sticky-element'),
   offset = sticky.offset();

   $(window).scroll(function () {
      if($(window).scrollTop() > offset.top) {
         sticky.addClass('fixed');
      } else {
         sticky.removeClass('fixed');
      }
   });
});

CSS

.fixed {
   position: fixed;
   top:0;
}

『jQuery Waypoints』使用バージョン

『jQuery Waypoints』には、ダウンロードファイルの中に『waypoints-sticky.js』およびその圧縮ファイル『waypoints-sticky.min.js』があります。このファイルを使用することで簡単にヘッダー固定を実装できます。

DOMO

Java Script

<script type="text/javascript">
$(function() {
    $('.my-sticky-element').waypoint('sticky');
});
</script>

CSS

.my-sticky-element.stuck {
   position:fixed;
   top:0;
}

コンテンツを固定するくらいでしたら、『jQuery Waypoints』プラグインを使うまででもなかったりするのですが、次のように複雑になるイベントには『jQuery Waypoints』プラグインが重宝します。

ペラサイト(1ページサイト)におけるメニューハイライト

これはどういう動作をするのかというと、ペラサイトにおいて、スクロールをすると、それに対応したメニューのデザインが変化するというものです。上手く説明できないので、デモを見てください。

共通HTMLのHTMLは以下のとおりです。

<header>
<nav>
<ul>
<li class="menu1"><a href="#contents1">コンテンツ1へ</a></li>
<li class="menu2"><a href="#contents2">コンテンツ2へ</a></li>
<li class="menu3"><a href="#contents3">コンテンツ3へ</a></li>
<li class="menu4"><a href="#contents4">コンテンツ4へ</a></li>
<li class="menu5"><a href="#contents5">コンテンツ5へ</a></li>
</ul>
</nav>
</header>
<h1>メニューハイライトサンプル(jQuery Waypoints使用)</h1>
<section id="contents1">
<h2>コンテンツ1</h2>
コンテンツ1<br>
...
コンテンツ1<br>
</section>
<section id="contents2">
<h2>コンテンツ2</h2>
コンテンツ2<br>
...
コンテンツ2<br>
</section>
<section id="contents3">
<h2>コンテンツ3</h2>
コンテンツ3<br>
...
コンテンツ3<br>
</section>
<section id="contents4">
<h2>コンテンツ4</h2>
コンテンツ4<br>
...
コンテンツ4<br>
</section>
<section id="contents5">
<h2>コンテンツ5</h2>
コンテンツ5<br>
...
コンテンツ5<br>
</section>

CSSも共通のものを使用しています。他に色々とデザインしているのですが、『.hover』クラスを設定・削除することにより、メニューのデザインを切り替えています。

CSS

.hover {
   color:#f00;
}

『jQuery Waypoints』不使用バージョン

DOMO

Java Script

$(function(){
   menu1 = $('#contents1').offset().top-60;
   menu2 = $('#contents2').offset().top-60;
   menu3 = $('#contents3').offset().top-60;
   menu4 = $('#contents4').offset().top-60;
   menu5 = $('#contents5').offset().top-60;

   $(window).scroll(function(){
      if($(this).scrollTop() > menu1) {
         $('.menu1 a').addClass('hover');
      } else {
         $('.menu1 a').removeClass('hover');
      }
      if($(window).scrollTop() > menu2) {
         $('.menu2 a').addClass('hover');
         $('.menu1 a').removeClass('hover');
      } else {
         $('.menu2 a').removeClass('hover');
      }
      if($(window).scrollTop() > menu3) {
         $('.menu3 a').addClass('hover');
         $('.menu2 a').removeClass('hover');
      } else {
         $('.menu3 a').removeClass('hover');
      }
      if($(window).scrollTop() > menu4) {
         $('.menu4 a').addClass('hover');
         $('.menu3 a').removeClass('hover');
      } else {
         $('.menu4 a').removeClass('hover');
      }
      if($(window).scrollTop() > menu5) {
         $('.menu5 a').addClass('hover');
         $('.menu4 a').removeClass('hover');
      } else {
         $('.menu5 a').removeClass('hover');
      }
   });
});

ここで、『menu1 = $(‘#contents1′).offset().top-60;』のように最後に『-60』を追加しているのは、メニュー領域分を加算しているためです。

『jQuery Waypoints』使用バージョン

DOMO

Java Script

$(function(){
   var section = $('section');
   var menuLink = $('nav ul li a')
   section.waypoint(function(direction) {
      var activeSection = $(this);
      if (direction === 'up') {
         activeSection = activeSection.prev();
      }
      var activeMenuLink = $('nav ul li a[href=#' + activeSection.attr('id') + ']');
      menuLink.removeClass('hover');
      activeMenuLink.addClass('hover');
   },{
      offset: '60'
   });
});

『jQuery Waypoints』を使用しない場合は、いちいちクラスの追加・削除を個別に設定しなければなりませんが、『jQuery Waypoints』を使用すれば、親要素の範囲を指定するだけでよいので、コンテンツが増減してもかなり楽に変更できます。