我有一个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();
        });
    });

}

对我来说是种工作,一切都变成了 buggy 。两种情况的代码( 960px)同时应用。

在此先感谢您的帮助!

最佳答案

我继续尝试自己解决此问题,并在阅读此线程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_desktopremove_desktopadd_mobileremove_mobile是为宽度大于或等于960px的设备添加或删除CSS样式的函数。

以下代码可确保在调整窗口大小时删除已应用(如果已应用)的样式:
$(document).ready(function () {
    updateContainer();
    $(window).resize(function () {
        if ( $(document).width() > 960 ) {
            remove_mobile();
        } else {
            remove_desktop();
        }
    });
});

我在Firefox,Chrome IE中对此进行了测试,并且一切似乎都正常运行。

关于javascript - jQuery在满足某些条件时调整窗口大小和文档加载,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/36067972/

10-12 00:21
查看更多