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

编辑

对不起，我是个笨蛋——我看到你的日志在重复，在我的脑海里，我立刻想，“循环！”除了这里没有循环；只是每次滚动超出参数时，控制台都会记录输出。

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

至于你真实世界的粘性标题，我想知道这是否是一个问题？

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

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

Example fiddle

---

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

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