Активная вкладка Navbar меняет цвет при прокрутке

Question

Я хотел бы, чтобы моя активная вкладка меняла цвет, когда пользователь прокручивал пас 1000px и возвращался к исходному цвету, когда он <1000px.

Я попробовал CSS ниже, который работает и постоянно меняет фон на активной вкладке.

.navbar-default .navbar-nav > .active{
   background: #111;
}

.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus {
    background: #111;
}

Также попытался объединить CSS выше и функцию прокрутки, но я не думаю, что я нацеливаюсь на активный div справа... Как я могу лучше всего нацелить этот активный класс табуляции в функции прокрутки? Или есть лучшая альтернатива этому методу?

JsFiddle: https://jsfiddle.net/Lczsjz3y/7/

Любая помощь будет оценена:)

Answer 1

Это будет работать:

$(window).scroll(function() {  
    var scroll = $(window).scrollTop();
    if (scroll >= 1000) {
        $(".navbar").css({"background-Color": "black"});
    } else {
        $(".navbar").css({"background-Color": "yellow"});
    }
});

Скрипка: https://jsfiddle.net/Lczsjz3y/21/

Answer 2

С вашей скрипки, похоже, вам просто нужно добавить слушателя к событию прокрутки, потому что, как у вас есть сейчас, он просто тянет scrollTop() значение под нагрузкой. Итак, что-то похожее на это:

$(window).on('scroll', function() {
   var scroll = $(window).scrollTop();
   if (scroll > 1000) {
     // change class
     $(this).find("navbar .active").css({
       "backgroundColor":"#000"
      });
   } else {
     // change it back
     $(this).find("navbar.active").css({
        "backgroundColor":"gray"
     });
   }
 });

Надеюсь это поможет.

Answer 3

Это не идеальное и не лучшее решение, но я попытался поиграть с тем, что я знаю, и мне удалось получить то, что я хотел. https://jsfiddle.net/y791ur1x/3/

$(document).scroll(function () {

 var y = $(this).scrollTop();

 if (y >= 1100) {
  $('.navbar').removeClass("navbar-inverse").addClass("navbar-default");
  $(".navbar-custom").css({
    "backgroundColor":"#000000"
  });
 } else {
  $('.navbar').removeClass("navbar-default").addClass("navbar-inverse");
  $(".navbar-custom").css({
    "backgroundColor":"#222222"
  });
 }
});

Тем не менее, с нетерпением ждем правильного чистого решения! ^^