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

Question

我目前正在开发一个具有粘性菜单功能的网站。我已经让正常的 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');
        }
    });
    }
});

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

Answer 1

首先，您应该保留您的代码 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();
});