sp時の画面幅(320px)のときにscrollifyとページャーを無効にしたい

前提・実現したいこと

webサイトを作っているのですが、sp時の画面幅(320px)で
scrollifyとページャーのプラグインを無効にしたいです。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード


<script type="text/javascript">
$('.menu').on('click',function(){
	    $('.menu__line').toggleClass('active');
	    $('.gnav').fadeToggle();
	});

var option = {
  section : '.js-section', // 対象を指定
  easing: "swing", // イージングをしてい(jQueryのanimation)
  scrollSpeed: 600, // スクロール時の速度
  scrollbars: true, // スクロールバーを表示するか
};

$(function() {
  $.scrollify(option); // scrollifyの実行
});


var $section = $('.js-section'); // 各スライド
var $pager = $('#js-pager'); // ページャー枠

// scrollifyのオプション設定
var option = {
  section : '.js-section',
  easing: "swing",
  scrollSpeed: 600,
  scrollbars: true,
  before:function(index) {
    pagerCurrent(index); // ページャーに対応する順番にクラス名を付与
  },
  afterRender:function() {
    createPager(); // ページャーの作成
  }
};

$(function() {
  $.scrollify(option); // scrollifyの実行
});


// ==============================
// functions
// ------------------------------

// ページャーに対応する順番にクラス名を付与
function pagerCurrent(index = 0) {
  var $li = $pager.find('li');
  $li.removeClass('is-current');
  $li.eq(index).addClass('is-current');
}

// ページャーの作成
function createPager() {
  $section.each(function(i, e){
    // ページ内リンク先の作成
    var sectionName = $(e).attr('data-section-name');
    // 最初のliにはクラスを付与
    var addClass = '';
    if (i === 0) {
        addClass = 'is-current';
    }
    // liのHTML作成
    var html = '';
    html += '<li class="' + addClass + '">';
    html += '<a href="#' + sectionName + '"></a>';
    html += '</li>';
    $pager.append(html);
  });
  
  pagerLink();
}

// ページャーでaタグをクリックされたらスクロールする
function pagerLink () {
  $pager.find('a').on('click', function() {
    $.scrollify.move($(this).attr("href"));
  });
};