jquery 滚动事件多次运行代码

Question

因此，使用以下代码，console.log 输出在滚动页面时多次滚动到开发工具控制台。

$(document).on("scroll", function() {
    if ($(this).scrollTop() > 25) {
        console.log("scrolled");
        //do something
    }
    else {
        //do something
    }
});

所以如果我有一堆 javascript 来控制将导航栏设置为粘性，它会有效地运行很多次。这似乎是一个糟糕的方法。

我尝试使用以下代码来阻止滚动事件：

$(document).on("scroll", function(e) {
    if ($(this).scrollTop() > 25) {
        console.log("scrolled");
        //do something
        e.preventDefault();
    }
    else {
        //do something
    }
});

但它仍然多次滚动到开发工具。我也尝试按照@jswebb 的建议使用 break 语句，但它给了我这个 js 错误 Uncaught SyntaxError: Illegal break statement

这是显示输出的屏幕截图。

如何防止此代码多次运行，但如果$(this).scrollTop() !> 25，则重新运行，所以在else语句中。

干杯

Answer 1

编辑

抱歉，我是个傻瓜 - 我看到你的日志在重复，在我的脑海里，我立刻想到，"LOOP!" 除了这里没有循环；只是每次滚动超出参数时，您的控制台都会记录输出。

我认为这不一定是坏事；这并不是说您每次滚动时都会触发代码，您只是告诉控制台在滚动超过 25 次时立即记录。

至于你的 real-world 置顶 header，我想知道这是否是个问题？

$(window).on("scroll", function(e) {
    if ($(this).scrollTop() > 25) {
        $("header").addClass("fixed");
    }
    else {
        $("header").removeClass("fixed");
    }
});

您只需将其设置为添加一个 class，使您的 header 固定超过 25 - 您使用 IRL 的代码只会在您设置的阈值时触发一次。

Example fiddle

您是否尝试过在达到限制后使用 break 语句退出条件？

$(window).on("scroll", function(e) {
    if ($(this).scrollTop() > 25) {
        console.log("scrolled");
        //do something
        break;
    }
    else {
        //do something
    }
});

jquery 滚动事件多次运行代码

jquery scrolled event runs code multiple times

javascript

jquery

standards

coding-style

编辑