スクロールに応じて要素を固定する PrettyScrollをリリースしました

See the Pen Pretty Scroll Example by appleple (@appleple) on CodePen.

See the Pen Pretty Scroll Example2 by appleple (@appleple) on CodePen.

<script src="./js/pretty-scroll.min.js"></script>

<script src="https://unpkg.com/pretty-scroll@1.1.4/js/pretty-scroll.js"></script>

<div class="js-container">
  <div class="main">
  </div>
  <div class="sub">
    <div class="js-pretty-scroll">
      <!-- ここに固定する要素のコンテンツが入ります。 -->
    </div>
  </div>
</div>

window.addEventListener('DOMContentLoaded', function(){
  new PrettyScroll('.js-pretty-scroll', { // スクロール固定したい要素を指定します。
    container: '.js-container', // スクロールする要素領域を指定します。
    offsetTop: 20, //スクロール固定する際のwindow上からの距離を指定します。
    offsetBottom: 20, // スクロール固定する際のwindow下からの距離を指定します。
    breakpoint: 768 // スクロール固定を有効にするbreakpointを設定します。
    condition: function() {return true;} // スクロール固定を有効にする条件を指定します。この条件判定はスクロールの度に発生します。デフォルトでは常にtrueを返します。
  });
});

npm install pretty-scroll --save

yarn add pretty-scroll

const PrettyScroll = require('pretty-scroll');

import PrettyScroll from 'pretty-scroll';