Question

我一直在修补enquire.js，到目前为止我发现它非常方便。

我只是碰到了一堵墙，可以使用额外的一双眼睛。这是我使用的脚本：

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

目标是在屏幕宽度足够时使用滚动侧边栏，但在没有空间的情况下则不会。我遇到的问题是它加载得很好，或者我可以加载宽度较小的页面，但在我使用平板电脑并且我在纵向和横向之间改变方向的情况下，它可能会起作用曾经，但最终侧边栏不会跟随卷轴。

我猜这是因为我没有加载它或正确卸载它，但是在媒体查询更改的情况下，我不确定在JQuery上使用什么事件（）/ off（）事件处理程序。

无法使用enquire.js取消注册脚本

0 个答案: