Question

我有一个简单的小函数，可以根据滚动位置和方向从元素中添加/删除类。

一切正常，直到我添加scrolled类时添加了延迟。现在最后的.removeClass('scrolled')似乎停止了工作。

有没有人知道为什么会这样？

这是我的代码;

$(function () {

var position = $(window).scrollTop(),
    $burger = $('.navToggle');

$(window).scroll(function () {

    if (  $(document).scrollTop() >= 125 ){

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

        $burger.delay(325).queue(function(next){
            $(this).addClass('scrolled');
            next();
        });

        if (scroll > position) {

            $burger.removeClass('going-up up-top').addClass('going-down');
            console.log('moving DOWN the page');

        } else {

            $burger.removeClass('going-down').addClass('going-up');
            console.log('moving UP the page');
        }

        position = scroll;

    } else if ( $(document).scrollTop() == 0 ) {

        $burger.addClass('up-top').removeClass('scrolled');

    }

}); // scroll function

}); // entire function

编辑：根据要求，我创建了一个非常简单的小提琴https://jsfiddle.net/c5d7r0xq/

在小提琴中，盒子以红色背景开始。一旦窗口滚动超过125px，这将变为绿色。它应该保持绿色，直到窗口滚动到最顶部，它应该返回到红色。它会短暂切换为红色，但会立即恢复为绿色。这是我正在研究的一个非常简化的例子，但遵循相同的原则。

Answer 1

问题只是在delay执行完毕之后你addClass('scrolled') removeClass('scrolled') removeClass('scrolled')。（如果我慢慢滚回到顶部，问题就不会显现出来。）

要修复此问题，请同时对addClass('scrolled')进行排队，或完全删除} else if ( $(document).scrollTop() == 0 ) { $burger.addClass('up-top').queue(function(next){ $(this).removeClass('scrolled'); next(); }); }延迟。

https://jsfiddle.net/mblase75/c5d7r0xq/4/

df

jQuery，.removeClass无效

1 个答案: