Created
July 1, 2013 17:18
-
-
Save philipjabenton/5902753 to your computer and use it in GitHub Desktop.
A CodePen by Philip Benton. Navigation Bar Show on Scroll Up - Navigation bar fixed at the top of the browser which hides upon scrolling down the page. Upon scrolling up the bar shows itself. No need to scroll to the top of the browser window.
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
| <!DOCTYPE html> | |
| <html> | |
| <head></head> | |
| <body> | |
| <nav class="navigation-bar is-visible" data-nav-status="toggle"> | |
| <ul> | |
| <li>Home</li> | |
| <li>About</li> | |
| <li>Services</li> | |
| <li>Blog</li> | |
| <li>Contact</li> | |
| </ul> | |
| </nav> | |
| <section class="content"></section> | |
| </body> | |
| </html> |
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
| $(document).ready(function(){ | |
| /** =========================================== | |
| Hide / show the master navigation menu | |
| ============================================ */ | |
| console.log('Window Height is: ' + $(window).height()); | |
| console.log('Document Height is: ' + $(document).height()); | |
| var previousScroll = 0; | |
| $(window).scroll(function(){ | |
| var currentScroll = $(this).scrollTop(); | |
| /* | |
| If the current scroll position is greater than 0 (the top) AND the current scroll position is less than the document height minus the window height (the bottom) run the navigation if/else statement. | |
| */ | |
| if (currentScroll > 0 && currentScroll < $(document).height() - $(window).height()){ | |
| /* | |
| If the current scroll is greater than the previous scroll (i.e we're scrolling down the page), hide the nav. | |
| */ | |
| if (currentScroll > previousScroll){ | |
| window.setTimeout(hideNav, 300); | |
| /* | |
| Else we are scrolling up (i.e the previous scroll is greater than the current scroll), so show the nav. | |
| */ | |
| } else { | |
| window.setTimeout(showNav, 300); | |
| } | |
| /* | |
| Set the previous scroll value equal to the current scroll. | |
| */ | |
| previousScroll = currentScroll; | |
| } | |
| }); | |
| function hideNav() { | |
| $("[data-nav-status='toggle']").removeClass("is-visible").addClass("is-hidden"); | |
| } | |
| function showNav() { | |
| $("[data-nav-status='toggle']").removeClass("is-hidden").addClass("is-visible"); | |
| } | |
| }); |
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
| @import "compass"; | |
| .navigation-bar { | |
| background-color: GhostWhite; | |
| border: 1px solid Gainsboro; | |
| left: 0; | |
| position: fixed; | |
| right: 0; | |
| top: 0; | |
| z-index: 1000; | |
| &.is-hidden { | |
| opacity: 0; | |
| -webkit-transform: translate(0,-60px); | |
| -webkit-transition: -webkit-transform .2s,background .3s,color .3s,opacity 0 .3s; | |
| } | |
| &.is-visible { | |
| opacity: 1; | |
| -webkit-transform: translate(0,0); | |
| -webkit-transition: -webkit-transform .2s,background .3s,color .3s; | |
| } | |
| ul { | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| li { | |
| display: inline-block; | |
| padding: 1em; | |
| } | |
| } | |
| } | |
| .content { | |
| min-height: 1200px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment