Skip to content

Instantly share code, notes, and snippets.

@johnnyopao
Last active December 15, 2022 11:43
Show Gist options
  • Save johnnyopao/59d1a216d6c599758671 to your computer and use it in GitHub Desktop.
Save johnnyopao/59d1a216d6c599758671 to your computer and use it in GitHub Desktop.
Scroll and Stick Fixed Header Min
<script>
//Scroll and Stick Fixed header v1.0
//Replace ID below with your box ID
var boxToFix = '#lp-pom-box-587';
function showOrHideHeader(){var o=$(window).scrollTop();o>topPositionOfBox?($(boxToFix).css({position:"fixed",top:"0px"}),$(boxClone).css({position:"fixed",top:"0px"})):($(boxToFix).css({position:"absolute",top:topPositionOfBox}),$(boxClone).css({position:"absolute",top:boxTop}))}var boxParent=$(boxToFix).parent(),boxClone=$(boxToFix).clone().attr("id",boxToFix+"-bg"),topPositionOfBox=$(boxToFix).position().top,boxHeight=$(boxToFix).css("height"),boxTop=$(boxToFix).css("top"),boxBorderWidthTop=$(boxToFix).css("border-top-width"),boxBorderWidthBottom=$(boxToFix).css("border-bottom-width"),boxBorderWidthLeft=$(boxToFix).css("border-left-width"),boxBorderWidthRight=$(boxToFix).css("border-right-width"),boxBorderStyleTop=$(boxToFix).css("border-top-style"),boxBorderStyleBottom=$(boxToFix).css("border-bottom-style"),boxBorderStyleLeft=$(boxToFix).css("border-left-style"),boxBorderStyleRight=$(boxToFix).css("border-right-style"),boxBorderColorTop=$(boxToFix).css("border-top-color"),boxBorderColorBottom=$(boxToFix).css("border-bottom-color"),boxBorderColorLeft=$(boxToFix).css("border-left-color"),boxBorderColorRight=$(boxToFix).css("border-right-color"),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(),$(window).scroll(function(){showOrHideHeader()});
</script>
@johnnyopao
Copy link
Author

Hey dportaro

Sorry for the late reply here. I didn't seem to get a notification of your comment.

Shoot a email to [email protected] and address it to me (Johnny). Provide a link to your page and i'll take a look.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment