Skip to content

Instantly share code, notes, and snippets.

@ughitsaaron
Last active August 29, 2015 14:08
Show Gist options
  • Select an option

  • Save ughitsaaron/1a5ffdad876a80610b63 to your computer and use it in GitHub Desktop.

Select an option

Save ughitsaaron/1a5ffdad876a80610b63 to your computer and use it in GitHub Desktop.
jQuery plugin for autohiding navigation
(function($) {
/* Autohider by Aaron Petcoff https://gist.github.com/aptkf/1a5ffdad876a80610b63 */
$.fn.autohider = function(args) {
defaults = {
toggle: "visible",
buffer:70,
tolerance: 8
};
args = $.extend(defaults, args);
return this.each(function() {
var last;
var $this = $(this);
$(window).scroll(function() {
var current = $(this).scrollTop();
if(current > last && current >= args.buffer) {
// scrolling down and past the buffer
$this.removeClass(args.toggle);
} else if (last - current > args.tolerance) {
// scrolling up past the tolerance level
$this.addClass(args.toggle);
}
// record last scroll position
last = current;
});
});
};
})(jQuery);
/* Example CSS implementation */
/* Make sure to include vendor prefixes or use a preprocessor like autoprefixer to handle vendor prefixing https://github.com/postcss/autoprefixer */
.nav {
position: fixed;
z-index: 10;
width: 100%;
height:3.7rem;
background-color:rgba(255,255,255,.55);
transform:translateY(-3.7rem);
transition:transform 0.35s ease;
}
.visible {
transform:translateY(0);
transition:transform 0.35s ease;
}
/* Example usage */
$(document).ready(function() {
// with default settings
$(".nav").autohider();
// with custom settings
$(".nav").autohider({
tolerance:0,
buffer:0
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment