Replies posted by Victor_Adascalitei

1 Reply

Johnny_Opao
Johnny_OpaoFormer Unbouncer
posted in Tips & Scripts

[Tips & Scripts] Creating a Fixed Header/Footer (aka Sticky Header)

Hello everyone, Just an update on this script for a sticky header after scrolling down. If you want to make it look more natural using a smooth transition instead of suddenly showing or hiding it, you can replace .show( ) and .hide( ) with .fadeIn( ) and .fadeOut( ) Here is what I used to make my sticky header show smoothly when the user scrolls down to the 2nd section of my landing page: //Replace ID below with your own box ID var boxToFix = ‘#lp-pom-box-609’; //Replace 575 below with your own var scrollPositionToShowHeader = 575; var boxParent = (boxToFix).parent(); var boxClone = (boxToFix).clone(); $(boxClone).appendTo(boxParent).css({“position”:“fixed”, “left”:“0”, “top”:“0”, “width”:“100%”, “z-index”:“899”}).children().remove(); $(boxToFix).css({“position”:“fixed”, “left”:“auto”, “top”:“0px”, “width”:“100%”, “z-index”:“999”, “border-style”:“none none none none”, “border-width”:“0px”, “background”:“none”}); showOrHideHeader(); function showOrHideHeader() { var current

156
K_G
Unbouncer
1 year ago

Badge winners

Show all badges
Terms & ConditionsCookie settings