javascript - jQuery、Javascript : Responsive site - execute function below 480px

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

现在，当我打开网站时，它就可以工作了。当我将窗口大小从桌面调整为手机大小(<480px)时，滚动时不会隐藏菜单。但如果我以那个大小刷新页面，它就会。反之亦然。我以为我的 $(window).resize 函数会处理它，但我想不会。大家有什么想法吗？

Answer 1

您需要在调整大小事件中执行宽度检查:

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 次调用中将事件监听器绑定(bind)到 window。