2021.09.10
OSS
祝日や休日の要素にclassを追加する AssignHoliday をリリースしました
スクロール時にスクロール量に応じて要素を固定するための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.
<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、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';