patric-boehner
6/29/2015 - 6:20 AM

Adjust Header When Scrolled

Adjust Header When Scrolled

primary-nav-shrink.js
content_copyfile_download
// Adjust header when scrolled
// Author: Bill Erickson
// URL: http://www.billerickson.net/code/adjust-header-scrolled/
// https://gist.github.com/srikat/7867185


// Target The Primary Nav
jQuery(document).ready(function($){
  // Remove 'bumper' class as it is not needed
  $(".nav-primary");
  $(window).scroll(function () {
    // 160 = height of sit header
    if ($(document).scrollTop() > 160 ) {
      $('.nav-primary').addClass('shrink');
    } else {
      $('.nav-primary').removeClass('shrink');
    }
  });
});
header-shrink.js
content_copyfile_download
// Adjust header when scrolled
// Author: Bill Erickson
// URL: http://www.billerickson.net/code/adjust-header-scrolled/
// https://gist.github.com/srikat/7867185

// Target The Header
jQuery(document).ready(function($){
    $(".site-header").after('<div class="bumper"></div>');
    $(window).scroll(function () {
	  if ($(document).scrollTop() > 20 ) {
	    $('.site-header').addClass('shrink');
	  } else {
	    $('.site-header').removeClass('shrink');
	  }
	});
});
enque-script.php
content_copyfile_download
<?php
//* Do NOT include the opening php tag shown above. Copy the code shown below.


//* Adjust Header Script
//* https://bitbucket.org/snippets/patrick_boehner/gEnxa/
add_action( 'wp_enqueue_scripts', 'pb_adjust_header_enqueue' );

//* Load from Child Theme directory
function pb_adjust_header_enqueue() {
    wp_enqueue_script( 'adjust-header', get_stylesheet_directory_uri() . '/js/adjust-shrink.js', array( 'jquery' ), '1.0.0', true ); //*Load script before </body>
}
adjust_nav.sass
content_copyfile_download
/* Just some basic styling that meets my needs and works well with the default genesis theme styling. Does not include any media query styles */

/* Aassign a fixed position in order for everything else to work correctly.*/

.nav-primary
	// Sticky Header
  .shrink
		position: fixed
		width: 100%
		z-index: 100
		top: 0
		left: 0
    // background: rgba(#333, 0.92)
 
/* This will ensure your site looks correct when the admin bar is displaying.*/
.admin-bar .nav-primary.shrink
	top: 28px
adjust_header.sass
content_copyfile_download
/* Just some basic styling that meets my needs and works well with the default genesis theme styling. Does not include any media query styles */

/* Aassign a fixed position in order for everything else to work correctly.*/
.site-header.shrink
	position: fixed
	top: 0
	left: 0
	width: 100%
	z-index: 100
	// background: rgba(#333, 0.92)
 
/* This will ensure your site looks correct when the admin bar is displaying.*/
body.admin-bar .site-header
	top: 28px
Readme.md
content_copyfile_download
  • Rendered
  • Source

#Adjust Header When Scrolled

This snippet comes from Bill Erickson. This jQuery script adds a class you can use to style the header based on the scroll position on the page. The script's markup is written around the wordpress and the genesis framework and may need to be modified to work with your markup.

The markup in the js is using elements from the Genesis Framework, so adjust to your situation.

This code adds a class of “shrink” to the header, which you can use to change the header. It also adds a div class="bumper" which you can set to the height of the old header. Without this, you’d see the site’s content jump up when you position: fixed; the header.

See the comment in the code for more detail.

For additional customization, see the notes and codex links under References.

#Refrance

API:
-https://api.jquery.com/scrollTop/
Notes:
-http://www.billerickson.net/code/adjust-header-scrolled/
-https://journalxtra.com/wordpress/quicksnips/make-wordpress-theme-headers-shrink-on-scroll/
-http://ozzyrodriguez.com/tutorials/fixed-header-wordpress/
-https://gist.github.com/srikat/7867185