スクロールに応じて要素を固定する PrettyScrollをリリースしました
スクロール時にスクロール量に応じて要素を固定するための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';
リンク
appleple.github.io/pretty-scroll
github.com/appleple/pretty-scroll
