Fading Fixed Header

fading_fixed_header.css

<style>
/* Update #lp-pom-box-53 with the ID of your landing page's box element. */  
#lp-pom-box-53, #lp-pom-box-53-color-overlay {display: none;}

</style>

fading_fixed_header.js

<script>
//Fading Fixed Menu, modified from Fixed Menu v1.3.1

//Replace ID below with your own box ID
var boxToAppend = '#lp-pom-box-53';
//Choose pixel height of when menu fades in. Use the height of a page section like this: $("#lp-pom-block-93").height();
var showHeight = 150; 

//Set to 'header' or 'footer'
var headerOrFooter = 'header';

var backgroundCSS = {"position":"fixed", "left":"0", "top":"0px", "bottom":"auto", "width":"100%", "z-index":"899"};
var colorOverlayCSS = {"position":"fixed", "left":"0", "top":"0px", "bottom":"auto", "width":"100%", "z-index":"auto", "border-style":"none none none none"};
var childrenCSS = {"position":"fixed", "left":"auto", "top":"0px", "bottom":"auto", "width":"100%", "z-index":"999", "border-style":"none none none none", "border-width":"0px", "background":"none"};
  if (headerOrFooter === 'footer') {
    backgroundCSS["top"] = 'auto';
    backgroundCSS["bottom"] = '0px';
    colorOverlayCSS["top"] = 'auto';
    colorOverlayCSS["bottom"] = '0px';
    childrenCSS["top"] = 'auto';
    childrenCSS["bottom"] = '0px';
  }
  var boxParent = $(boxToAppend).parent();
  var boxClone = $(boxToAppend).clone()

  boxClone.appendTo(boxParent).css(backgroundCSS).children().remove();
  $(boxToAppend).css(childrenCSS);
  $(boxToAppend + '-color-overlay').appendTo(boxClone).css(colorOverlayCSS);
      
var bothBoxes = boxToAppend + ', ' + boxToAppend + '-color-overlay';
$(window).scroll( function() {
  if ($(this).scrollTop() > showHeight) {
    $(bothBoxes).fadeIn();
  } else {
    $(bothBoxes).fadeOut();
  }
});
</script>