Jquery - 導航欄上的導航欄顏色變化不會反轉

Question

工作在樂趣網站上，試圖讓我的導航欄在用戶滾動瀏覽標題標題後從透明變爲顏色。我在this question上使用了第二個解決方案。問題是，當我向後滾動時，導航欄顏色不會改變。

這是一個削減jsfiddle，演示了這個問題。上述解決方案與我的版本之間的主要區別是什麼導致了這種差異？

下面是從小提琴的代碼：

html：

css：

.site-header{ 
height:400px; 
} 

.site-nav{ 
line-height: 56px; 
width: 100%; 
text-align:right; 
position:fixed; 

transition-duration: .5s; 
} 

.site-title { 
position:absolute; 
top:40%; 
left:30%; 

font-family: serif; 
font-size: 72px; 
font-weight: 300; 
line-height: 56px; 
letter-spacing: -1px; 
margin-bottom: 0; 
float: left; 

color: black; 

} 

js：

/*Background color change on scroll past title*/ 
var changePoint = $(".site-title").offset().top; 

$(document).scroll(function(){ 
if($(this).scrollTop() > changePoint){ 
    $('.site-nav').css({'background-color': '#DDD'}); 
} else{ 
    $('.site-nav').css({'background-color': 'transparant'}); 
} 
}); 

Answer 1

看起來好像你的代碼非常好！一個問題是你在第二個CSS聲明中有一個錯字。

相反的：$('.site-nav').css({'background-color': 'transparant'});，你應該說：$('.site-nav').css({'background-color': 'transparent'});

我試圖改變你的小提琴的字母，它似乎對我的Safari瀏覽器的工作。

Answer 2

在這裏看到：jsfiddle

使用transparent，不transparant上background-color

JQ

var changePoint = $(".site-title").offset().top; 

$(document).scroll(function(){ 
    if($(this).scrollTop() > changePoint){ 
     $('.site-nav').css({'background-color': '#DDD'}); 
    } else{ 
     $('.site-nav').css({'background-color': 'transparent'}); 
    } 
});