要使用這個jQuery插件，需要在頁面中引入jquery(1.11+)和jquery.scrollex.js文件。

<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollex.js"></script>

調用插件

在頁面DOM元素加載完畢之后，你可以通過scrollex()方法來初始化插件。例如，在指定元素上制作進入視口和離開視口的效果：

$(function() {
  $('#foobar').scrollex({
    enter: function() {
      // Set #foobar's background color to green when we scroll into it.
        $(this).css('background-color', 'green');
    },
    leave: function() {
      // Reset #foobar's background color when we scroll out of it.
        $(this).css('background-color', '');
    }
  });
});

事件

jquery.scrollex.js插件支持以下一些事件。

enter：當指定元素進入視口時觸發。可以通過mode, top和bottom參數來調整它的行為。

leave：當指定元素離開視口時觸發。可以通過mode, top和bottom參數來調整它的行為。

initialize：當scrollex()方法在某個元素上調用時觸發。

terminate：當unscrollex()方法在某個元素上調用時觸發，它的作用是撤銷前一個scrollex()調用。

scroll：在某個元素滾動通過視口時觸發。例如：

$(function() {
  $('#foobar').scrollex({
    scroll: function(progress) {
 
      // Progressively increase #foobar's opacity as we scroll through it.
        $(this).css('opacity', Math.max(0, Math.min(1, progress)));
 
    }
  });
});

mode, top和bottom

元素在視口中的位置可以通過mode, top和bottom參數來做進一步的調整。

mode

用于決定元素和視口的接觸面積，判斷一個元素是否在視口之內。可以是下面的一些取值：

取值行為

default元素和視口的接觸面積在視口之內。

top頂部視口邊緣在元素之內。

bottom底部視口邊緣在元素之內。

middle頂部或底部視口邊緣在元素的中間。

top和bottom

通過top和bottom參數可以移動元素和視口的接觸面積，可以使用像素值，百分比值，或視口的百分比值(如20vh)。正值向視口內部移動，負值向視口外部移動。例如：

$(function() {
  $('#foobar').scrollex({
    top: '-20%',
    bottom: '-20%',
    enter: function() {
      $(this).css('background-color', 'green');
 
    },
    leave: function() {
      $(this).css('background-color', '');
    }
  });
});