Question

当用户滚动页面时，我想给元素一个.class。然后在用户停止滚动时将其取走（.class）。

简单地说，我只想在滚动页面时给出字体真棒图标类fa-spin，当滚动停止时，图标停止旋转。

很高兴知道如何在滚动时通常应用css动画。

由于

Answer 1

您可以使用https://github.com/ssorallen/jquery-scrollstop

var $el = $('.element');
$(window).on("scrollstart", function() {
   $el.addClass('scrolling')
})
$(window).on("scrollstop", function() {
   $el.removeClass('scrolling')
})

Answer 2

您可以在addClass事件中使用removeClass和scroll，如下所示。这将在滚动时添加类，并在延迟100毫秒后将其删除。

$(window).scroll(function() {
    $('div').addClass('myClass');

    setTimeout(function() {
        $('div').removeClass('myClass');
    }, 100);
});

DEMO

Answer 3

您可以这样使用：

$(window).scroll(function() {
    $('div').addClass('blue');//add class on scroll
    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function() {
        $('div').removeClass('blue');//remove class on scrolling stops
    }, 250));
});

demo

Answer 4

添加例如滚动时淡入淡出动画可以执行以下操作：

$(window).scroll(function () {
$('#second').delay(1000).fadeIn('slow');

（延迟是可选的）

检查示例：jsfiddle.net

滚动时给出元素类

4 个答案: