Jquery - Navbar Farbwechsel auf Blättern wird nicht rückgängig gemacht

Question

Arbeiten an einer Website für den Spaß zu versuchen, meine Navbar von transparenten zu Farbe ändern, nachdem Benutzer scrollt vorbei Banner Titel. Ich habe die zweite Lösung auf this question verwendet. Problem ist, meine Navbar Farbe ändert sich nicht zurück, wenn ich zurück blättern.

Hier ist eine abgespeckte jsfiddle, die das Problem demonstriert. Was ist der Hauptunterschied zwischen der obigen Lösung und meiner Version, die die Diskrepanz verursacht? Hier

ist der Code von der Geige:

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

Es scheint, als ob Ihr Code vollkommen in Ordnung ist! Das einzige Problem ist, dass Sie in Ihrer zweiten CSS-Deklaration einen Tippfehler haben.

Statt: $('.site-nav').css({'background-color': 'transparant'});, sollten Sie sagen werden: $('.site-nav').css({'background-color': 'transparent'});

Ich habe versucht, die Buchstaben auf Ihrer Geige zu ändern und es scheint auf meinem Safari-Browser zu arbeiten.

Answer 2

siehe hier: jsfiddle

Verwendung transparent, nicht transparant auf 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'}); 
    } 
});