追従ナビゲーション

a-blog cmsでは、スクロールに追従するサイドメニューを実装するためのJavaScript（Pretty Scroll）が標準で実装されています。

1. 設定の編集

この機能の設定は、/js/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みJSについて：設定を編集する」を参照してください。

// スクロール時の追随
//--------------------
prettyScrollMark: '.js-pretty-scroll',
prettyScrollConfig: {
  container: '.js-pretty-scroll-container',
  offsetTop: 20,
  offsetBottom: 20,
  breakpoint: 767,
  condition: function () {
    return true;
  }
},

HTMLは以下のように記述します。このように記述することで、.js-pretty-scroll-containerが適用された要素の範囲内で、.js-pretty-scrollの要素がスクロールに追従するようになります。

<div class="js-pretty-scroll-container">
  <div class="main">
  </div>
  <div class="sub js-pretty-scroll" data-offset-top="20">
  </div>
</div>

また、data-offset-top に数字を記述することでスクロールする際にその数字分、画面上端からのオフセット距離を記述できます。

---