2

我一直在修改 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

有什么作为明显的错误或遗漏跳出来的吗？

提前致谢。

4

0 回答 0