jquery - enquire.jsでスクリプトの登録を解除するのに問題があります

Question

私はenquire.jsをいじくり回してきましたが、これまでのところ、かなり便利だと感じています。

壁に少しぶつかっただけで、余分な目を使うことができます。これが私が使用しているスクリプトです：

`//http://css-tricks.com/scrollfollow-sidebar/からのスクリプト

$sidebar   = $(".modules");
$window    = $(window);
offset     = $sidebar.offset();
topPadding = 15;

    function scrollFollow() {
        if ($window.scrollTop() > offset.top) {
            $sidebar.stop().animate({
            marginTop: $window.scrollTop() - offset.top + topPadding
            }, 100);
        } else {
            $sidebar.stop().animate({
            marginTop: 0
            }, 100);
        }
    }

function inlineDisplay () {
    $('.module.description').css('display','none');
    var skillDesc = $(this).find(".desc").html();
    $(".inline.description").stop().fadeOut(200, function() {
        $(".inline.description").delay(200).empty();
        $(".inline.description").delay(200).prepend(skillDesc).fadeIn(500);
    });

}

function moduleDisplay () {
    $('.inline.description').css('display','none');
    var skillDesc = $(this).find(".desc").html();
    $(".modules .module.description").stop().fadeOut(200, function() {
        $(".modules .module.description").delay(200).empty();
        $(".modules .module.description").delay(200).prepend(skillDesc).fadeIn(500);
    });
}

enquire.register("screen and (max-width:69em)", {

    match : function(tablet) {
        console.log("handler max-width 69em");

        $('.skills').removeClass('module');
        $('.skills').addClass('inline');

        $(document).on('click', '.skills.inline li', inlineDisplay);

    },

    unmatch : function(tablet) {
        console.log("unmatched handler max-width 69em");

        $('.skills').removeClass('inline');

        $(".inline.description").stop().fadeOut(200, function() {
            $(".inline.description").delay(200).empty();
        });

        $(document).off('click', '.skills.inline li', inlineDisplay);
    }

}).register("screen and (min-width:70em)", {

    match : function(bigScreens) {
        console.log("handler min-width 70em");

        $('.skills').removeClass('inline');
        $('.skills').addClass('module');

        $('.modules').addClass('sidebar');

        $(document).on('click', '.skills.module li', moduleDisplay);
        $window.on('scroll', $sidebar, scrollFollow);

    },

    unmatch : function(bigScreens) {
        console.log("unmatched handler min-width 70em");

        $('.skills').removeClass('module');

        $('.modules').removeClass('sidebar');

        $(".modules .module.description").stop().fadeOut(100, function() {
            $(".modules .module.description").delay(100).empty();
        });

        $(document).off('click', '.skills.module li', moduleDisplay);

        $window.off('scroll', $sidebar, scrollFollow);

    }

}).listen();`

目標は、画面が十分に広いときにスクロールサイドバーを表示することですが、画面に余裕がない場合は表示しません。私が抱えている問題は、うまく読み込まれるか、ページをより狭い幅で読み込むことができるということですが、タブレットを使用していて、縦向きと横向きの間で向きを変えるシナリオでは、一度は機能する可能性がありますが、最終的にはサイドバーはスクロールに追従しません。

これは、ロードまたはアンロードが適切に行われなかったことが原因だと思いますが、メディアクエリが変更された場合、JQueryのon（）/ off（）イベントハンドラーで使用するイベントがわかりません。

問題のサイトはhttp://samuel-allen.comです。

明らかなエラーまたは脱落として何かが飛び出しますか？

前もって感謝します。