jQuery

【jQuery】スクロールされたときに要素にクラスを追加するScrollclass.js

May 5, 2017
SCROLLCLASS.JS

Scrollclass.jsはスクロールされたときに要素にクラスを追加するための簡単なjQueryプラグイン。

Initialization

クラス名をセレクタに渡します。

$(document).ready(function() {
  $('.example').scrollClass();
});

Set classes to elements

任意の要素にdata-scroll-classを追加

<div class="example" data-scroll-class="my-class"></div>

Plugin Options

  1. delay
  2. threshold
  3. offsetTop
  4. callback

Example:

$(document).ready(function() {
  $('.example').scrollClass({
    delay: 20, //set class after 20 milliseconds delay
    threshold: 50, //set class when 50% of element enters the viewport
    offsetTop: 80, //height in pixels of a fixed top navbar
    callback: function () { //fire a callback
      console.log('Callback fired!');
    }
  });
});

MIT
Demo/Download