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。所以最好永远不要复制粘贴任何代码，因为当你必须改变行为或修复bug时你必须编辑所有的副本。

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

Answer 2

您正在resize事件侦听器中定义一个滚动事件侦听器，因此基本上您在每个resive事件上声明滚动侦听器（因此，如果用户调整其浏览器大小，则滚动侦听器定义了很多次）。你需要纠正这个。

您可以声明一个标志（布尔值）来指示视口是否低于725px。它应该通过测试视口尺寸在$（document）.ready（...）上初始化。

创建一个resize事件监听器，通过测试视口宽度来更新此标志，这样您就可以知道是否需要管理类。

此时，resize事件监听器中的console.log（your_flag）检查它是否正常工作。

然后声明一个scroll事件监听器，在这个监听器中，你要做的第一件事是测试标志值。如果视口＆gt; 725，然后管理类，否则什么也不做。

使用resize仅在特定宽度上执行javascript

2 个答案: