Pretty Scroll

A library to make an element follow you as you scroll

Go to the demo page

Installation

npm

npm install pretty-scroll --save

or yarn

yarn add pretty-scroll

CDN

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

Usage

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>