javascript - 仅在一定宽度以上执行javascript并调整大小

我目前正在开发具有粘性菜单功能的网站。我的普通javascript可以正常工作，一旦客户端滚动到150px以上，它将添加一些类。

我现在面临的问题是，一旦人们查看了725px以下的网站，我就不想添加类，因此我添加了一条规则，即它仅执行725px以上的脚本，但是问题是这样的：

如果我将窗口调整为完整大小，该功能将无法再使用，因此我使用javascript调整大小功能创建了另一个规则，但无法正常工作。

这是我的脚本：

$(document).ready(function(){
var mainbottom = 150;
if($(window).innerWidth() > 725) {
    $(window).on('scroll',function(){

        stop = Math.round($(window).scrollTop());
        if (stop > mainbottom) {
            $('.header').addClass('sticky-nav');
            $('.logo').addClass('sticky-logo');
            $('.navigation').addClass('sticky-menu');
        } else {
            $('.header').removeClass('sticky-nav');
            $('.logo').removeClass('sticky-logo');
            $('.navigation').removeClass('sticky-menu');
        }
     });
    }
});
$(window).resize(function() {
var mainbottom = 150;
if($(window).innerWidth() > 725) {
    $(window).on('scroll',function(){

        stop = Math.round($(window).scrollTop());
        if (stop > mainbottom) {
            $('.header').addClass('sticky-nav');
            $('.logo').addClass('sticky-logo');
            $('.navigation').addClass('sticky-menu');
        } else {
            $('.header').removeClass('sticky-nav');
            $('.logo').removeClass('sticky-logo');
            $('.navigation').removeClass('sticky-menu');
        }
    });
    }
});

我希望有人可以帮助我解决这个问题。

最佳答案

首先，您应该保留代码DRY。因此最好不要复制粘贴任何代码，因为当您必须更改行为或修复错误时，必须编辑所有副本。

您除了在onready处理程序中还有第二个$（window）.resize（）处理程序之外，所以也许这就是为什么不触发它的原因。

这应该工作：

$(document).ready(function(){
    var mainbottom = 150;

    function onScroll () {
        stop = Math.round($(window).scrollTop());

        if (stop > mainbottom) {
            $('.header').addClass('sticky-nav');
            $('.logo').addClass('sticky-logo');
            $('.navigation').addClass('sticky-menu');
        } else {
            $('.header').removeClass('sticky-nav');
            $('.logo').removeClass('sticky-logo');
            $('.navigation').removeClass('sticky-menu');
        }
    }

    var widthExceeded = false;
    $(window).resize(function() {
        $(window).innerWidth() > 725) {
            if (!widthExceeded) {
                $(window).on('scroll', onScroll);
            }
            widthExceeded = true;
        } else {
            if (widthExceeded) {
                $(window).off('scroll', onScroll);
            }
            widthExceeded = false;
        }
    }).resize();
});