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

2018年04月09日（月）

スクロール時にスクロール量に応じて要素を固定するためのJavaScriptを公開しました。そういったJavaScriptは世間でこれまでもいくつか公開されていたのですが、「どの範囲まで固定するか」また「スマホ時はスクロールを中断するか否か」などそういった多くのシチュエーションに耐えうるJavaScriptがなかったので、今回、実際に案件レベルで使えるように一からJavaScriptを書いて、公開するに至りました。
https://appleple.github.io/pretty-scroll/では、簡単に英語で利用方法が解説されていますが、こちらでは日本語でしっかり解説します。

デモ
特徴
使い方
ダウンロード
リンク

デモ

短いコンテンツの場合

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

長いコンテンツの場合

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

特徴

スクロール固定する要素がwindowの高さより長い場合でも端から端までスクロール量に応じて表示できる。
スクロール固定する領域をセレクターで指定できる。
スクロール固定する条件をオプションで指定できる。
スクロール固定するためのブレイクポイントを設定できる。
固定する際の、windowトップからのオフセット距離を指定できる。
CSS不要

使い方

CSS及びJavaScriptの読み込み

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

CDNを使った読み込み

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

HTMLの記述

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

JavaScriptの記述

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、yarnを使ったインストールが可能です。

npm install pretty-scroll --save

yarn add pretty-scroll

npmでのインストール後は、BrowserifyやWebpackなどのbundleツールを使ったrequireも可能です。

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

Babelをお使いの方はimportもご利用いただけます。

import PrettyScroll from 'pretty-scroll';