Question

我这里有这段代码可以根据滚动位置添加和删除类，甚至可以在初始加载时使用，但我不希望这样做，该如何防止呢？

jQuery(window).scroll(function () {

  var scroll = jQuery(window).scrollTop();

  console.log(scroll);

  if (scroll >= 100) {
    jQuery("#banner").addClass("sticky");
  } else if (scroll == 0) {
    jQuery("#banner").removeClass("sticky");
  }

  if (scroll > 0) {
    jQuery(".navigation-top").addClass("sticky");
  } else if (scroll == 0) {
    jQuery(".navigation-top").removeClass("sticky");
  }

});

当您刷新页面且滚动不为0时，问题就在初始加载上

Answer 1

您可以在布尔函数中使用带if语句的布尔变量来确定是否应运行代码。

在这里，我们通过将变量设置为true来禁用代码，然后在滚动时将其设置为false，从而允许函数执行。

var onload_functionDisable = true;

jQuery(window).scroll(function() {

    if (onload_functionDisable == false) {
        var scroll = jQuery(window).scrollTop();

        console.log(scroll);

        if (scroll >= 100) {
            jQuery("#banner").addClass("sticky");
        } else if (scroll == 0) {
            jQuery("#banner").removeClass("sticky");
        }

        if (scroll > 0) {
            jQuery(".navigation-top").addClass("sticky");
        } else if (scroll == 0) {
            jQuery(".navigation-top").removeClass("sticky");
        }
    }
    onload_functionDisable = false;
});

修改先前的代码是错误的，将始终运行。因此，现在通过将onload_functionDisable = false;移到scroll function的底部进行了改进。因此，在加载时会禁用滚动功能，但是一旦跳过滚动代码，该变量就会设置为false，从而为下一个滚动事件启用代码。

我有一个工作的simplified jsfiddle showing this.

Answer 2

刷新页面并且滚动不为0时，问题就在初始加载上了

好的。我想到的唯一解决方案是：

在加载时，您将scrollTop强制为零。
然后注册scroll事件处理程序。

$(window).scrollTop(0);

$(window).scroll(function () {

  var scroll = $(window).scrollTop();
  console.log(scroll);

  $("#banner").toggleClass("sticky", scroll >= 100 );
  $(".navigation-top").toggleClass("sticky", scroll > 0 );
});

第二个参数是在两种情况下都返回true / false的条件。

jQuery在滚动时添加类，但在初始加载时不添加类

2 个答案: