javascript - 使用 (window).resize 实现响应式布局的多个脚本

Question

所以我目前正在开发一个具有响应式布局的单页网站。在较小的屏幕上，我使用动画滚动插件在内容 div 之间导航，但在较大的屏幕上，我使用插件来简单地切换这些 div 的可见性。

我遇到的问题是，如果在加载页面后调整窗口大小，我需要更改脚本。我认为 $(window).resize 可以解决问题，但它似乎不起作用，并继续使用最初加载的脚本而不是执行正确的脚本。 .anchorAnimate 和 .anchorTog 是我正在使用的插件，但我不认为它们是这里的问题。有需要的话我可以发帖。

代码:

$(document).ready(function() {

    var w = $(window).width();

    if(w <= 767) {
        $('a.anchorLink').anchorAnimate();
    }
    if(w >= 768) {
        $('a.anchorLink').anchorTog();
    }

    $(window).resize(function(){
        if(w <= 767) {
            $('a.anchorLink').anchorAnimate();
        }
        if(w >= 768) {
            $('a.anchorLink').anchorTog();
        }
    });
});

Answer 1

在您的代码中，变量“w”超出了调整大小函数的范围。当文档达到就绪状态时，“w”将仅是窗口宽度。要解决此问题，您可以在调整大小函数中重新声明变量，以便每次调整大小时，我们都会检查宽度:

$(window).resize(function(){
    var w = $(window).width();
    if(w <= 767) {
        $('a.anchorLink').anchorAnimate();
    }
    if(w >= 768) {
        $('a.anchorLink').anchorTog();
    }
});