Scroll and Stick Fixed Header

scrollandstick.html

<script>
  
  //Scroll and Stick Fixed header v1.0
  
  //Replace ID below with your box ID
  var boxToFix = '#lp-pom-box-587';
  
  var boxParent = $(boxToFix).parent();
  var boxClone = $(boxToFix).clone().attr('id', boxToFix + '-bg');
  var topPositionOfBox = $(boxToFix).position().top;
  
  var boxHeight = $(boxToFix).css('height');
  var boxTop = $(boxToFix).css('top');
  
  var boxBorderWidthTop = $(boxToFix).css('border-top-width');
  var boxBorderWidthBottom = $(boxToFix).css('border-bottom-width');
  var boxBorderWidthLeft = $(boxToFix).css('border-left-width');
  var boxBorderWidthRight = $(boxToFix).css('border-right-width');
  
  var boxBorderStyleTop = $(boxToFix).css('border-top-style');
  var boxBorderStyleBottom = $(boxToFix).css('border-bottom-style');
  var boxBorderStyleLeft = $(boxToFix).css('border-left-style');
  var boxBorderStyleRight = $(boxToFix).css('border-right-style');
  
  var boxBorderColorTop = $(boxToFix).css('border-top-color');
  var boxBorderColorBottom = $(boxToFix).css('border-bottom-color');
  var boxBorderColorLeft = $(boxToFix).css('border-left-color');
  var boxBorderColorRight = $(boxToFix).css('border-right-color');
  
  var boxBg = $(boxToFix).css('backgroundColor');
  
  $(boxToFix).css({"position":"fixed", "left":"auto", "width":"100%", "border-style":"none none none none", "border-width":"0px", "background":"none"});
  
  $(boxClone).css({"position":"absolute", 
                   "width":"100%", 
                   "top":boxTop, 
                   "backgroundColor":boxBg, 
                   "height":boxHeight, 
                   "z-index":"999", 
                   "border-top-width":boxBorderWidthTop, 
                   "border-bottom-width":boxBorderWidthBottom, 
                   "border-left-width":boxBorderWidthLeft, 
                   "border-right-width":boxBorderWidthRight, 
                   "border-top-style":boxBorderStyleTop, 
                   "border-bottom-style":boxBorderStyleBottom, 
                   "border-left-style":boxBorderStyleLeft, 
                   "border-right-style":boxBorderStyleRight, 
                   "border-top-color":boxBorderColorTop,
                   "border-bottom-color":boxBorderColorBottom,
                   "border-left-color":boxBorderColorLeft,
                   "border-right-color":boxBorderColorRight,
                  });
    
  $('<div class="lp-positioned-content" id="fixedHeaderChildren" style="z-index:1000"></div>').appendTo('#lp-pom-root');
  $(boxToFix).appendTo('#fixedHeaderChildren'); 
        
  $(boxClone).appendTo('#lp-pom-root');
  $(boxClone).children().remove();

  showOrHideHeader();
  
  function showOrHideHeader() {
    var currentPositionFromTop = $(window).scrollTop();
    
    if (currentPositionFromTop > topPositionOfBox) {
      $(boxToFix).css({"position":"fixed", "top":"0px"});
      $(boxClone).css({"position":"fixed", "top":"0px"});
    } else {
      $(boxToFix).css({"position":"absolute", "top":topPositionOfBox});
      $(boxClone).css({"position":"absolute", "top":boxTop});
    }
  }
  
  $(window).scroll(function() {
    showOrHideHeader();
  });
  
</script>