stickySidebar.js - manabuyasuda/jquery-plugins GitHub Wiki

スクリプト

• $elmに固定させたい要素を指定します
• stateに固定するときに付与するclass属性を指定します
• $offsetに固定を開始する数値を指定します（デフォルトでは任意の要素の高さ）
• replaceWidthに固定を開始するウィンドウサイズを指定します（デフォルトではreplaceWidth以上になると処理される）

$(function() {
  // 処理をする要素
  var $elm = $('.sub-nav');

  $elm.each(function() {
    var $this = $(this);
    function stickySidebar() {
      // 高さを測る要素
      var $offset = $('.main-nav').outerHeight();
      // 付与するstateクラス
      var state = 'is-active';
      // 処理を実行するウィンドウサイズ
      var replaceWidth = 768;
      // ウィンドウサイズの測定
      var windowWidth = parseInt($(window).width());
      // ページトップからのスクロール量の測定
      var scroll = $(document).scrollTop();

      // ウィンドウサイズが`replaceWidth`以上で、なおかつ`$offset`以上スクロールすると処理。
      if(scroll >= $offset && windowWidth >= replaceWidth) {
        $this.addClass(state);
      } else {
        $this.removeClass(state);
      }
    }
    stickySidebar();

    $(window).on('scroll', function() {
      stickySidebar();
    });
  });
});

CSS

固定する要素のアクティブ時のスタイル。高さを100%にして、スクロールできるように指定している。

.sub-nav.is-active {
  position: fixed;
  top: 1em;
  right: 1em;
  height: 100%;
  overflow-y: scroll;
}