Question

所以我有这个功能：

(function() {

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

    function headroom() {

        // headroom

        $("nav").headroom({
            "tolerance" : 0,
            "offset" : 1300,

        });

        // to destroy
        $("nav").headroom("destroy");

    }

    function headroomMobile() {

        // headroom

        $("#nav-wrap").headroom({
            "tolerance" : 0,
            "offset" : 200,

        });

        // to destroy
        $("#nav-wrap").headroom("destroy");

    }

    if (wwidth >= 480) {

        headroom();
    }
    if (wwidth < 480) {

        headroomMobile();
    }



})();

我希望这个函数重复每次有一个窗口调整大小但我无法使其工作，也许是因为它是一个闭包函数..我试图命名整个函数并在window.resize上触发它但它没有工作，我可能做了一些语法错误或错误的代码位。我确信这不是一项艰巨的任务，但我不能让它发挥作用：\你能帮忙吗？

非常感谢你！

Answer 1

如果要调用函数，则调整窗口大小，然后将其绑定到

像这样调整大小事件：

(function () {

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

    function headroom() {

        // headroom

        $("nav").headroom({
            "tolerance": 0,
            "offset": 1300,

        });

        // to destroy
        $("nav").headroom("destroy");

    }

    function headroomMobile() {

        // headroom

        $("#nav-wrap").headroom({
            "tolerance": 0,
            "offset": 200,

        });

        // to destroy
        $("#nav-wrap").headroom("destroy");

    }

    function setHeader() {
        if (wwidth >= 480) {
            headroom();
        } else {
            headroomMobile();
        }
    }

    setHeader(); // on load

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

})();

但这不是最有效的方法..结帐this

Answer 2

使其成为命名函数，并将其用于两者：

(function() {
    function handleWindowSizing() {
        // ...logic here...
    }

    $(window).load(handleWindowSizing).resize(handleWindowSizing);
})();

请注意，load上的window事件在页面加载过程中处理非常晚，您可能也想立即执行您的逻辑（确保您的代码位于HTML的最末端，因此它所处理的任何内容都已被解析并放入DOM中。 E.g：

<!-- ...content... -->
<script>
(function() {
    function handleWindowSizing() {
        // ...logic here...
    }

    handleWindowSizing();    
    $(window).load(handleWindowSizing).resize(handleWindowSizing);
})();
</script>
</body>
</html>

重复一个else / if窗口大小的闭包函数

2 个答案: