March 3, 2018

Pretty Scrollはスクロールするときに要素を作るライブラリ。

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

JavaScript

import PrettyScroll from 'pretty-scroll'; //with browserify or webpack

new PrettyScroll('.js-sidebar', {
    container: '.js-container',
    breakpoint: 575, // stop running the js when the window size is smaller than 575px
    offsetTop: 20, // space between the sticky element and the top of the window
    offsetBottom: 20, // space between the sticky element and the bottom of the window
    condition: () => true // you can disable the sticky behavior by returning false, it will be executed when you scroll.
});

HTML

<div class="container js-container">
    <div class="main">
    <!-- main contents -->
    </div>
    <div class="sub">
      <div class="js-sidebar">
        <!-- sticky contents -->
      </div>
    </div>
  </div>