javascript - jQuery ScrollTop() function animation menu -


i have little problem, try use jquery create animation in navbar. navbar animation it's : http://www.vogue.fr/?international problem it's animation start when i'm @ top of page. need animation begins when user scroll or scroll down anywhere.

my jquery code :

$(document).ready(function () {  $(window).scroll(function() {    if ($(document).scrolltop() < 1) {     $('nav').addclass('navyolo');     $('nav').removeclass('navyo');     $( "ul" ).show();  } else {     $('nav').removeclass('navyolo');     $('nav').addclass('navyo');     $( "ul" ).hide();     }   }); }); 

if can me. lot!

you can determine direction of scroll , add/remove class of nav.

var lastscrolltop = 0;  $(window).scroll(function(event){     var currentscroll = $(this).scrolltop();     if ($(this).scrolltop() > lastscrolltop){         $('nav').addclass('hidden');     } else {        $('nav').removeclass('hidden');     }     lastscrolltop = currentscroll;  });
.wrapper {    height: 1000px;    background: red;  }    nav {    width: 100%;    height: 50px;    background: yellow;    position: fixed;    top: 0px;    transition: height 0.3s ease 0s;    -webkit-transition: height 0.3s ease 0s;    -moz-transition: height 0.3s ease 0s;  }    nav.hidden {    height: 0;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <div class="wrapper">    <nav></nav>  </div>


Comments