jquery animate on scroll position

Question

Im пытается достичь липкой навигации, как в http://www.trinitydecorator.com/decoration/our-work/ Липкая навигация прокрутки плавно, когда она появляется. до сих пор у меня есть:

jQuery("document").ready(function($){ 

       var nav = $('.pengejar'); 

       $(window).scroll(function() { 
        if ($(this).scrollTop() > 324) { 
         nav.addClass("sulap"); 
        } else { 
         nav.removeClass("sulap"); 
        } 
       }); 

      }); 

и HTML:

<div class="pengejar"> 
    <ul> 
     <li><a href="#">Destinasi</a></li> 
     <li><a href="#">Acara</a></li> 
     <li><a href="#">Belanja</a></li> 
     <li><a href="#">Kuliner</a></li> 
     <li><a href="#">Hotel</a></li> 
     <li><a href="#">Transportasi</a></li> 
    </ul> 
</div> 

и CSS выглядит следующим образом:

.pengejar { 
    background: rgb(0, 0, 0) transparent; /* default fallback */ 
    background: rgba(0, 0, 0, 0.5); /* nice browsers */ 
    padding: 0; 
    position: fixed; 
    right: 0; 
    top: 0; 
    width: 100%; 
    z-index: 999; 
    display: none; 
} 

    .sulap { 
     display: block !important; 
    } 

Answer 1

В этом случае, вы на самом деле не нужен второй класс (.sulap). Это просто jQuery toggling (показать/скрыть или лучше slideDown/slideUp).

Просто измените код JS, чтобы:

jQuery("document").ready(function($){ 
      var nav = $('.pengejar'); 
      $(window).scroll(function() { 
       if ($(this).scrollTop() > 324) { 
        nav.slideDown(); 
       } else { 
        nav.slideUp(); 
       } 
      }); 
     });