Show/Hide Site Header on Scroll

Mit Hilfe der folgenden Snippets wird der Site-Header erst nach einer bestimmten Scrolldistanz eingeblendet und beim Zurückscrollen wieder ausgeblendet. Davon ausgenommen sind schmale Displays, auf diesen soll der Header stets sichtbar sein. Ein entsprechender Breakpoint wird festgelegt.

jQuery:

/* Hide and Show Site Header on Scroll
--------------------------------------------- */

/**
 * Hide and Show Site Header on Scroll
 *
 * @borrows bubSiteSettings.mobileMenuMaxWidth
 */
$(function() {
  
  // Select body and header.
  var $header = $( '.site-header' );
  var $body = $( 'body' );
  
  // Set position at which the element will appear 
  // (in pixels from top without the 'px').
  var scrollTopPosition = 55;

  // Set max width for mobile header or menu.
  var mobileMenuMaxWidth = bubSiteSettings.mobileMenuMaxWidth;
  
  // Hide and show the header (with mobile exception).
  $( window ).on( 'load scroll resize', function() {

    if ( window.innerWidth > mobileMenuMaxWidth ) {
      
      if ( $( window ).scrollTop() > scrollTopPosition ) {
        $body.addClass( 'scrolled' );
        $header.slideDown( 200 );
      } else {
        $body.removeClass( 'scrolled' )
        $header.slideUp( 200 );
      };
    }
    else {
      $header.show();
    }
  });
});

Initially hide the header with CSS:

/* Initially Hide Header */

@media screen and (min-width: 801px) {
  
  .home .site-header {
    display: none;
  }
}