爲什麼我的代碼（jQuery）沒有響應？ goal：Sticky header

Question

我有一個基本的HTML，我創建了一個新類（原始滾動），一旦我開始滾動，它將添加固定到我的菜單的位置。

HTML

<header class=" original"> 
    <h1>This is a Sticky Nav Demo!</h1> 
    <p>MAIN MENU</p> 
</header> 

<div class="main"> 
    <h2>Lorem ipsum dolor sit amet</h2> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean fringilla, </p> 

CSS

.original { 
    height: 100px; 
    padding-top: 20px; 
    background: #f07057; 
} 

.original-scrolled { 
    position: fixed; 
    width: 100%; 
    top: 0; 
} 

jQuery的 - 這是我使用的功能，但它似乎它不工作！

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

    if (scroll >= 90) { 
     $(".original").addClass(".original-scrolled"); 
    } else { 
     $(".original").removeClass(".original-scrolled"); 
    } 
}); 

我是初學者，所以我很抱歉，如果這個代碼是一個爛攤子！

Answer 1

您添加和刪除類的方式是錯誤的。 這應該工作：

$(window).scroll(function() {  
    var scroll = $(window).scrollTop(); 
    if (scroll >= 90) { 
     console.log("more than 90"); 
     $(".original").addClass("original-scrolled"); 
    } else { 
     $(".original").removeClass("original-scrolled"); 
    } 
}); 

您指定的類選擇，同時添加和刪除的類名稱。 你應該看看api here