Last active
August 29, 2015 14:08
-
-
Save ughitsaaron/1a5ffdad876a80610b63 to your computer and use it in GitHub Desktop.
jQuery plugin for autohiding navigation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (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); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* 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; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* 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