Fading a fixed header when scrolling down using jQuery


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



  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;


 * Shows the fixed header when, scrolling down, the static header disappears
// Clone the header html into the hidden div

// 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


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


Developed and designed by Netgloo
© 2019 Netgloo