jQuery滚动事件行为

Question

我对滚动事件有一个普遍的疑问。

让我们假设我有一个叫.notification的div。当用户滚动过去500时，我想添加一个类.ns--show。如果它们小于500，我想补充类.ns--hide，但前提是用户已经滚过500

这里是jQuery代码

$(window).scroll(function(){ 

    var st = $(this).scrollTop(); 

    if (st >= 500) { 
    $('.notification').addClass('ns--show'); 
    } else { 
    $('.notification').removeClass('ns--show').addClass('ns--hide'); 
    } 
}); 

我遇到的问题是，当浏览器加载时，scrollTop的值为0，所以它增加了类.ns--hide立即负荷和DOM的样子：

<div class="notification ns--hide"></div> 

有没有写这使得它的工作原理是“不添加ns--hide除非办法该用户滚动过去的500，然后滚动备份小于500"

注：因为我使用CSS过渡/是改变DIV看起来就躲类的方式变换，我不能简单地删除同一类ns--show 。

编辑：

我一个解决方案提出了基于以下岗位：

if (st >= 500) { 
if ($('.notification').hasClass('ns--hide')) { 
    $('.notification').removeClass('ns--hide').addClass('ns--show'); 
} else { 
    $('.notification').addClass('ns--show'); 
} 
} else { 
    if ($('.notification').hasClass('ns--show')) { 
    $('.notification').removeClass('ns--show').addClass('ns--hide'); 
    } 
} 
} 

Answer 1

您可以使用标志指示NS-显示被添加类。

例如：

$(window).scroll(function(){ 

    var st = $(this).scrollTop(); 

    if (st >= 500) { 
    $('.notification').removeClass('ns--hide');.addClass('ns--show class-added'); 
    } else { 
    if($('.notification').hasClass('class-added')) 
    $('.notification').removeClass('ns--show class-added').addClass('ns--hide'); 
    } 
}); 

的类添加是一个标志，可以帮助你从滚动经过500px的认识。

希望它有帮助。

问候。