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的認識。

希望它有幫助。

問候。