Skip to content

Instantly share code, notes, and snippets.

@louisnovick
Last active May 3, 2016 16:46
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save louisnovick/93f978c154ffaed5cbc2 to your computer and use it in GitHub Desktop.
Save louisnovick/93f978c154ffaed5cbc2 to your computer and use it in GitHub Desktop.
Shrinking menu on scroll
(function($){
$(function(){
var lastScrollTop = 0, delta = 5;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if( $(window).scrollTop() > 200 ) {
if(Math.abs(lastScrollTop - st) <= delta)
return;
if (st > lastScrollTop){
$("#main-header").addClass("animated slideUp");
$("#main-header").removeClass("slideDown");
} else {
$("#main-header").removeClass("slideUp");
$("#main-header").addClass("animated slideDown");
}
lastScrollTop = st;
}
});
});
})(jQuery);
.animated {
-webkit-animation-duration: .5s;
-moz-animation-duration: .5s;
-o-animation-duration: .5s;
animation-duration: .5s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both
}
@-webkit-keyframes slideDown {
0% {
-webkit-transform: translateY(-120px);
}
100% {
-webkit-transform: translateY(0);
}
}
@-moz-keyframes slideDown {
0% {
-moz-transform: translateY(-120px);
}
100% {
-moz-transform: translateY(0);
}
}
@-o-keyframes slideDown {
0% {
-o-transform: translateY(-120px);
}
100% {
-o-transform: translateY(0);
}
}
@keyframes slideDown {
0% {
transform: translateY(-120px);
}
100% {
transform: translateY(0);
}
}
.animated.slideDown {
-webkit-animation-name: slideDown;
-moz-animation-name: slideDown;
-o-animation-name: slideDown;
animation-name: slideDown;
}
@-webkit-keyframes slideUp {
0% {
-webkit-transform: translateY(0);
}
100% {
-webkit-transform: translateY(-120px);
}
}
@-moz-keyframes slideUp {
0% {
-moz-transform: translateY(0);
}
100% {
-moz-transform: translateY(-120px);
}
}
@-o-keyframes slideUp {
0% {
-o-transform: translateY(0);
}
100% {
-o-transform: translateY(-120px);
}
}
@keyframes slideUp {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-120px);
}
}
.animated.slideUp {
-webkit-animation-name: slideUp;
-moz-animation-name: slideUp;
-o-animation-name: slideUp;
animation-name: slideUp;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment