Navbar FadeIn и FADEOUT при прокрутке

Question

привет я делаю поиск о том, как сделать мой Navbar FadeIn при прокрутке вниз и FADEOUT во время прокрутки вверх и нашел хорошую тему помогли мне много Fading bootstrap navbar on scrolldown, while changing text color

также http://jsfiddle.net/f5UTL/

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

<script> 
 
    $(function() { 
 
     var header = $('.opaque'); 
 
     $(window).scroll(function() { 
 

 
      var scroll = $(window).scrollTop(); 
 

 
      if (scroll >= 300) { 
 
       header.removeClass('opaque').addClass('navbar-fixed-top').fadeIn(); 
 
      } else { 
 
       header.removeClass('navbar-fixed-top').fadeOut().addClass('opaque'); 
 
      } 
 
     }); 
 
    }); 
 
< /script> 
 

 

.navbar-fixed-top { 
 
    
 
    background-color: rgba(128,128,128,1); 
 
    transition: background-color all 2s; 
 
    -webkit-transition: background-color all 2s; 
 
    -moz-transition: background-color all 2s; 
 
    -o-transition: background-color all 2s; 
 
    } 
 
.navbar-fixed-top .opaque { 
 
    background-color: rgba(128,128,128,0); 
 
    transition: background-color all 2s ; 
 
    -webkit-transition: background-color all 2s ; 
 
    -moz-transition: background-color all 2s ; 
 
    -o-transition: background-color all 2s ; 
 
    }

Answer 1

вот упрощенная версия того, чего вы хотите достичь.

$(function() { 
    //caches a jQuery object containing the header element 
    var header = $('#nav'); 
    $(window).scroll(function() { 
     var scroll = $(window).scrollTop(); 
     if (scroll >= header.height()) { 
     header.fadeOut(); 
     } else { 
     header.fadeIn(); 
     } 
    }); 
}); 

Надеюсь, что это поможет вам продолжить.

обновлено fiddle.