javascript - jQuery 在满足某些条件时调整窗口大小和加载文档

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 和 > 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 是为设备添加或删除 CSS 样式的函数宽度大于或小于 960px。

以下代码确保在窗口调整大小时删除已经应用(甚至应用)的样式:

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

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