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
Post a Comment