Question

我有一个隐藏菜单栏的插件。但我只希望这种情况发生在低于480px的文档大小（也就是说，在手机上，而不是在桌面计算机上）。

var wi;
$(window).ready(function() {
    wi = $(window).width(); 
});

$(window).resize(function() {
    wi = $(window).width();
});

$(function() {
    if(wi<480){
        $('nav').scrollUpMenu({
            waitTime: 200,
            transitionTime: 150,
            menuCss: { 'position': 'fixed', 'top': '0'}
        });
    }
});

scrollUpMenu（）代码来自https://github.com/dvdsmpsn/Scroll-Up-Menu

现在，当我打开网站时，它有效。当我将窗口从桌面大小调整为手机大小（＆lt; 480px）时，滚动时不会隐藏菜单。但是，如果我刷新该大小的页面，它会。反之亦然。我以为我的$（window）.resize函数会处理它，但我猜不是。任何想法？

Answer 1

您需要在resize事件中执行宽度检查：

var wi;
$(window).ready(function() {
    wi = $(window).width();
    checkWidth();
});

$(window).resize(function() {
    wi = $(window).width();
    checkWidth();
});

function checkWidth() {
    if(wi < 480){
        $('nav').scrollUpMenu({
            waitTime: 200,
            transitionTime: 150,
            menuCss: { 'position': 'fixed', 'top': '0'}
        });
    }
}

更清洁的解决方案是这样的：

$(window).on('load resize',
    function () {
        if($(window).width() < 480){
            $('nav').scrollUpMenu({
                waitTime: 200,
                transitionTime: 150,
                menuCss: { 'position': 'fixed', 'top': '0'}
            });
        }
    }
);

这样您就可以在1次通话中将事件监听器绑定到window。

Answer 2

您需要在resize事件上运行处理程序。

但最好保留状态标志，以便每次布局更改时只运行一次代码

$(function(){
    var breakpoint = 480,
        state = 'big';

    function handleLayout(){
       var width = $(window).width();

       if (width < breakpoint && state === 'big') {
           state = 'small';
           $('nav').scrollUpMenu({
               waitTime: 200,
               transitionTime: 150,
               menuCss: { 'position': 'fixed', 'top': '0'}
           });
       } else if (width >= breakpoint && state === 'small') {
           state = 'big';
           // do what you want to revert to normal here..
       }
    }

    $(window).resize(handleLayout).trigger('resize');
});

Answer 3

最后，我选择了A. Wolff的matchMedia，以及初始/调整大小Cerbrus的功能：

$(window).on('load resize',
    function () {
        var mq  = matchMedia('(max-width: 480px)');
        if (mq.matches) {
            document.title = 'mobile';
        }else{
            document.title = 'desktop';
        }
    }
);

因为它具有最佳的设备支持和性能 http://jsperf.com/matchmedia-vs-resize/3

jQuery，Javascript：响应式站点 - 执行低于480px的功能

3 个答案: