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

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

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

在这里，我们通过将变量设置为true onload来禁用代码，然后在scroll上将其设置为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的底部来改进它。因此，在加载时，scroll功能被禁用，但一旦它跳过scroll代码，该变量就被设置为false，从而为下一个scroll事件启用代码。

我有一个可以工作的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的条件。

Answer 3

我遇到了同样的问题，并在这里找到了解决方案：https://www.py4u.net/discuss/959392这个示例有点不同，但解决了相同的问题：

在专用函数中分隔修复头部的回调：

function FixHeader() {
    if ( $( window ).scrollTop() > 170 ) {
        $( '.header' ).addClass( 'sticky' );
    }
    else {
        $( '.header' ).removeClass( 'sticky' );
    }
}

将回调绑定到scroll事件：

$( window ).scroll( FixHeader );

最后：

让回调在DOM就绪时被调用：

$( FixHeader );

这是一种简写

$( document ).ready( FixHeader );