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();
        });
    });

}

对我来说有点有用，一切都变得越来越糟糕。两种情况的代码（＆lt; = 960px和＆gt; 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浏览器，一切似乎都没有问题。

窗口上的jQuery调整大小并在满足特定条件时加载文档

1 个答案: