I am using the following code to show (a) a sticky header after 150 px when the screen width is greater than 600px and (b) a sticky footer if the screen width is less than 600px.
When the user clicks the CTA in the sticky footer, the page auto-scrolls to the bottom, where I have placed the sign-up form. At this point, I’d like to hide the sticky footer, as it is no longer useful and gets in the way of the user filling out the form. How can I adjust this code accordingly?
//Fading Fixed Menu, modified from Fixed Menu v1.3.1
//Replace ID below with your own box ID
var boxToAppend = ‘#lp-pom-box-717’;
//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’;
if ( lp.jQuery(window).width() <= 600 ) {
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’) {
backgroundCSSz“top”] = ‘auto’;
backgroundCSS“bottom”] = ‘0px’;
colorOverlayCSS:“top”] = ‘auto’;
colorOverlayCSSr“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();
}
});