当满足某些条件时，jQuery on window resize and document load

Question

我有一个 jQuery 脚本，它在满足某些条件时插入和删除一些 CSS 类。它用于增强网页顶部的粘性菜单。

虽然代码没有错误，但我不知道如何添加一个条件，以便在调整浏览器窗口大小时重新执行相同的代码。例如，如果最初检测到浏览器宽度为 1366px，即使我将其调整为 800px，也不会执行应申请 $(window).width() <= 960 的代码。如果刷新已经设置 800px 宽度的页面，一切正常。

我用$(window).resize() 尝试了几件事，但到目前为止没有任何效果。

我用来修改 CSS 的代码如下：

function updateContainer() {

    $(window).scroll(function() {

        if ( $(window).width() > 960 ) {

                if( $(window).scrollTop() > 40 && $(document).height() - $(window).height() > 79 ) { 
                    $(".site-header").addClass("site-header-scrolled");
                    } else if ($(window).scrollTop() <= 40) {
                    $(".site-header").removeClass("site-header-scrolled");
                }

        } else {

            if( $(window).scrollTop() > 40 && $(document).height() - $(window).height() > 160 ) {

                $(".title-area").hide(200);
                $(".nav-menu").addClass("nav-menu-scrolled").hide(200);

                if ( !$(".mobile-nav").length ) {
                            $(".title-area").before('<div class="mobile-nav"><p>Navigation ☰</p></div>');   
                } else {
                    return false;
                }

                $(".mobile-nav").click(function(){
                        $(".nav-menu").slideToggle(200);
                });

                } else if ($(window).scrollTop() <= 40) {

                $(".title-area").show(200);
                $(".nav-menu").removeClass("nav-menu-scrolled").show(200).removeAttr("style");
                $(".mobile-nav").remove();

            }

        }

    });

我也将同样的代码包装在：

    $(document).ready(function() {
         "use strict";
    });

我不确定这是否绝对必要。

我尝试了这里找到的前两个解决方案：jQuery on window resize。而

    $(document).ready(function () {
        updateContainer();
        $(window).resize(function() {
            updateContainer();
        });
    });

}

对我来说有点用，一切都变得有问题。同时应用两种情况（ 960px）的代码。

提前感谢您的帮助！！

Answer 1

我继续尝试自己解决问题，并在阅读此线程jQuery: How to detect window width on the fly? 后设法找到了可行的解决方案。

我将原来的代码修改为：

function updateContainer() {
    $(window).scroll(function() {

        if ( $(window).width() > 960 ) {

            if( $(window).scrollTop() > 40 && $(document).height() - $(window).height() > 79 ) { // scroll bug appears if 78 or lower
                add_desktop();
            } else if ($(window).scrollTop() <= 40 ) {
                remove_desktop();
            }

        } else {

            if( $(window).scrollTop() > 40 && $(document).height() - $(window).height() > 160 ) {
                add_mobile();
            } else if ($(window).scrollTop() <= 40 ) {
                remove_mobile();
                //alert (winwidth);
            }

        }

    });

}

add_desktop、remove_desktop、add_mobile 和 remove_mobile 是为宽度大于或小于 960 像素的设备添加或删除 CSS 样式的函数。

以下代码可确保在调整窗口大小时删除已应用（如果已应用）的样式：

$(document).ready(function () {
    updateContainer();
    $(window).resize(function () {
        if ( $(document).width() > 960 ) {
            remove_mobile();
        } else {
            remove_desktop();
        }
    });
});

我在 Firefox、Chrome 和 IE 中对此进行了测试，一切似乎都没有问题。