Fading a fixed header when scrolling down using jQuery

HTML

<body>
 
  <!-- Static header -->
  <header>
    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
  </header>
 
  <!-- Hidden div that will becomes the fading (fixed) header -->
  <div class="fading-header" style="display:none"></div>
  
  ...

 </div>
 
</body>

CSS

#fading-header{
  display: none;
  position: fixed;
  z-index: 1000;
  top: 0px;
  left: 0;
  right: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  opacity: .95;
}

Javascript

/* 
 * Shows the fixed header when, scrolling down, the static header disappears
 */
// Clone the header html into the hidden div
$("header").clone().appendTo("#fading-header");

// Get the header height
var headerHeight = $("header").outerHeight();

// Scrolling down it slides down/up the fixed header
$(window).on('scroll', function() {
  if ($(this).scrollTop() > headerHeight) {
    $("#fading-header").slideDown(); // or fade in with .fadeIn()
  } else {
    $("#fading-header").slideUp(); // or fade out with .fadeIn
  }
});

Categories

Category BootstrapCategory CoffeescriptCategory DrupalCategory GravCategory HTMLCategory JavascriptCategory JoomlaCategory jQueryCategory LaravelCategory MagentoCategory PHPCategory SharePointCategory SpringCategory ThymeleafCategory WordPressCategory Workflow

Comments

Developed and designed by Netgloo
© 2016 Netgloo