Изменить цвет фона, если фиксированная позиция

Question

У меня есть эта простая навигация, которая была создана для скрытия фиксированного заголовка при прокрутке вниз. Когда вы прокрутите вверх, он снова появится для удобной навигации. Он отлично работает! Тем не менее, мне нужно, чтобы он немного изменился и не был уверен, как это сделать.

Когда позиция зафиксирована в абсолютном верхнем углу страницы, мне нужно, чтобы заголовок был прозрачным. Когда позиция затем прокручивается вниз, а затем немного прокручивается. Мне нужно, чтобы фон был синим, пока он не достигнет абсолютной вершины, а затем снова измените на прозрачный.

http://codepen.io/anon/pen/VYPGyg

здесь является JQuery в вопрос:

var didScroll; 
      var lastScrollTop = 0; 
      var delta = 5; 
      var navbarHeight = $('header').outerHeight(); 

     $(window).scroll(function(event){ 
      didScroll = true; 
     }); 

     setInterval(function() { 
      if (didScroll) { 
       hasScrolled(); 
       didScroll = false; 
      } 
     }, 250); 

     function hasScrolled() { 
      var st = $(this).scrollTop(); 

      // Make sure they scroll more than delta 
      if(Math.abs(lastScrollTop - st) <= delta) 
       return; 

      // If they scrolled down and are past the navbar, add class .nav-up. 
      // This is necessary so you never see what is "behind" the navbar. 
      if (st > lastScrollTop && st > navbarHeight){ 
       // Scroll Down 
       $('header').removeClass('nav-down').addClass('nav-up'); 
      } else { 
       // Scroll Up 
       if(st + $(window).height() < $(document).height()) { 
        $('header').removeClass('nav-up').addClass('nav-down'); 
       } 
      } 

      lastScrollTop = st; 
     } 

Любая помощь будет здорово!

Answer 1

Я бы использовал ваши классы nav-down и nav-up, так как они все равно добавляются. Когда вы используете CSS для управления стилем, вы, как правило, лучше разделяете проблемы между различными аспектами своего программного обеспечения. CSS обычно должен обрабатывать презентацию, кроме случаев, когда ее функциональность ограничена или недостаточно программна (введите javascript).

Например, возьмите класс .nav вниз и настроить прозрачность:

Обновленный codepen:

http://codepen.io/anon/pen/YPNOLM

Добавлена ​​некоторая логика вашей функции:

function hasScrolled() { 
      var st = $(this).scrollTop(); 

      // Make sure they scroll more than delta 
      if(Math.abs(lastScrollTop - st) <= delta) 
       return; 

      // If they scrolled down and are past the navbar, add class .nav-up. 
      // This is necessary so you never see what is "behind" the navbar. 
      if (st > lastScrollTop && st > navbarHeight){ 
       // Scroll Down 
       $('header').removeClass('nav-down').addClass('nav-up'); 
      } else { 
       // Scroll Up 
       if(st + $(window).height() < $(document).height()) { 
        $('header').removeClass('nav-up').addClass('nav-down'); 
       } 
       // the 100 can be whatever height you think it should be at 
       if($(window).scrollTop() > 100) { 
        $('header').addClass('notTop') 
       } else { 
       $('header').removeClass('notTop')      
       } 
      } 

      lastScrollTop = st; 
     } 

И свойство непрозрачности:

header.nav-down { 
    position: fixed; 
    width: 100%; 
    top: 0; 
    transition: top 0.2s ease-in-out; 
    z-index: 1; 
    background: #fff; 
    padding: 25px 0px 0px 0px; 
    opacity: 0.8 
} 

А:

header.nav-down.notTop { 
    background-color: blue 
}