A trendy feature right now is skinny site headers that show up when you scroll down the page. These floating headers are typically separate from the site header itself and styled separately. The simple jQuery code below does this. It checks where the user is on a page, and if past a specific scroll threshold it will slide down the alternate site header.
This file contains 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
| jQuery(document).ready(function($){ | |
| var showed = false; | |
| function floating_header() { | |
| if ( $(window).width() > 700 ) { | |
| window_scroll = $(this).scrollTop(); | |
| if ( window_scroll > 220 ) { | |
| if ( showed == false ) { | |
| $('#floating-header').slideDown('fast'); | |
| //alert('show'); | |
| } | |
| showed = true; | |
| } else { | |
| if ( showed == true) { | |
| $('#floating-header').slideUp('fast'); | |
| //alert('hide'); | |
| } | |
| showed = false; | |
| } | |
| } | |
| } | |
| $(window).scroll(floating_header); | |
| floating_header(); | |
| }); |
Questions, comments, or suggestion for improvement? Leave a comment on the GitHub Gist page.