Having trouble unregistering a script with enquire.js

Question

I have been tinkering with enquire.js, and so far am finding it pretty handy.

I've just hit a bit of a wall and could use an extra set of eyes. Here's the script I'm using:

`// SCRIPT FROM 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();`

The goal is to have a scrolling sidebar when the screen is wide enough, but not when there's no room for it. The problem I'm having is that it loads fine, or I can load the page with a smaller width, but in a scenario where I'm using a tablet and I change orientation between portrait and landscape, it might work once, but eventually the sidebar won't follow the scroll.

I'm guessing this is due to my not loading it or unloading it properly, but in the case of the media query change, I'm not sure what event to use in the JQuery on() / off() event handlers.

The site in question is http://samuel-allen.com

Anything jump out as an obvious error or omission?

Thanks in advance.