Цвет ссылки не меняется с прокруткой параллакса

Question

Я создаю сайт параллакса, на котором есть nav. Когда страница прокручивается вниз, навигатор меняет свой цвет. Лук, когда страница загружает цвет фона навигации, прозрачен, а когда страница прокручивается вниз, она превращается в белую.

Ссылки предназначены иметь цвет #BBB9BE и парить цвет #3F4474 на белый цвет фона, но он показывает один и тот же цвет и парения цвет на прозрачном фоне, что означает мое другое заявление не работает должным образом. В чем проблема?

var a = $(".navbar-default").offset().top; 
$(document).scroll(function() { 
    if ($(this).scrollTop() > 10) { 
    $('.navbar-default').css({ "background": "#fff" }).addClass('after-scroll- nav-border'); 

    $('.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus ').hover(function() { 
     $('.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus ').css({ "color": "#3F4474" }); 
    }, function() { 
     $(".navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus").css({ "color": "#BBB9BE" }); 
    }); 
    } else { 
    $('.navbar-default').css({ "background": "transparent" }).removeClass('after-scroll-nav-border'); 

    $('.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus ').hover(function() { 
     $('.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus ').css({ "color": "#fff" }); 
    }, function() { 
     $(".navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus").css({ "color": "#BBB9BE" }); 
    }); 
    } 
}); 

Answer 1

Вам не хватает слов в вашем вопросе, поэтому я не уверен, полностью ли я понимаю. Во-первых, есть пробел между after-scroll- nav-border, это может быть вашей проблемой. И как уже упоминалось, вы создаете событие .hover() каждый раз, когда прокручивается страница.

Во-вторых, вместо использования .hover() вы рассмотрели использование чистого решения CSS? Что-то вроде этого:

JS

var a = $(".navbar-default").offset().top; 
    $(document).scroll(function(){ 
    if($(this).scrollTop() > 10) 
    { 
     $('.navbar-default').addClass('after-scroll-nav-border'); 
    } 
    else 
    { 
     $('.navbar-default').removeClass('after-scroll-nav-border'); 
    } 
    } 

CSS

.navbar-default { 
    background: transparent; 
} 

.navbar-default.after-scroll-nav-border { 
    background: #ffffff; 
} 

.navbar-default .navbar-nav>li>a { 
    color: #bbb9be; 
} 

.navbar-default .navbar-nav>li>a:hover, 
.navbar-default .navbar-nav>li>a:focus { 
    color: #ffffff; 
} 

.navbar-default.after-scroll-nav-border .navbar-nav>li>a:hover, 
.navbar-default.after-scroll-nav-border .navbar-nav>li>a:focus { 
    color: #3f4474; 
} 

При загрузке страницы будут использоваться стили по умолчанию (#bbb9be текст, #ffffff парения). Вы уже добавляете класс after-scroll-nav-border после прокрутки страницы за 10, поэтому, создав еще один набор стилей, внедренных в этот класс, вы получите желаемые изменения цвета без ненужного JS.

Надеюсь, я правильно понял ваш вопрос.