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
    }
});