How to alter this code to hide sticky footer in mobile at certain height

  • 19 January 2018
  • 0 replies
  • 3 views

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

var bothBoxes = boxToAppend + ', ’ + boxToAppend + ‘-color-overlay’;
(window).scroll( function() { if ((this).scrollTop() > showHeight) {
(bothBoxes).fadeIn(); } else { (bothBoxes).fadeOut();
}
});


0 replies

Be the first to reply!

Reply