JQuery - изменение цвета в Navbar на прокрутке не будет отменено

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'});

Я попытался изменить буквы на вашей скрипке, и это, кажется, работает на моем сафари браузер.

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'}); 
    } 
});