Hide sticky footer near bottom of page

  • 31 July 2015
  • 5 replies
  • 66 views
R

I’ve attached a full-width form to the footer of the page, using a very helpful snippet I found from someone here (below). I would like the sticky section to hide itself once it reaches the bottom of the page. How can I do this?

//Fixed Menu (Header or footer) v1.3.1



//Replace ID below with your own box ID

 var boxToAppend = '#lp-pom-box-243';



//Set to 'header' or 'footer'

 var headerOrFooter = 'footer';



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);

5 replies

Joe

Hi Roger,

I am a little confused of the objective.  Is it that when people reach your form at the bottom of the page you want the sticky header to disappear to be one less distraction away from the CTA?  

This sounds like a question for one of the javascript wizards in the community.  Hang tight and I’m sure someone will come to the rescue.  

Best of luck,

Joe

R

It’s not published yet, so I can’t provide a link - but we have a sticky full-width page section with two input fields (name and email). When completed, it sends you to the bottom of the page where the full form is, with these two fields injected. Therefore I’d like to hide the sticky form ‘teaser’ once the bottom most page section with the full form is in view.

J

Thanks for the update, Roger. I think it would be helpful to see the published page once it’s live. Hopefully someone from our Community can help us figure out a solution. 🙂

F

is there any solution for this, i want my header to seen after second page, there is Benjamin made great jop at his page http://www.quelmetier.fr/ how can we add sticky header that will start from second page? Thanks

F

I think i found the answer for my problem, https://gist.github.com/johnnyopao/445088ba176c04b0a5ba this will help 🙂

Reply


Terms & ConditionsCookie settings