Hi Zoe, the page URL is https://offers.piquetea.com/landing-freecartons/ right now but I intend to extend it to all my other landing pages (of the same style)

Hi,

I am trying to make my header sticky and also have the button scroll to a section on the landing page but I’m unable to do it - can you please help?

Thanks!

Hi,

we already implemented the sticky header a few weeks/months back and we didn’t notice any issues. But only recently we figured out that there is an issue on small screens which are less wide than our page properties.

Users are only able to scroll to the right on the page, but not within the header and therefore can’t see all the elements. Please take a look at the youtube video. The page for reference ist Prüfplaner

Did anyone experience the same issues? How did you solve it?

Thank you

Hey @Vipin_Maurya drop this into the page Scripts (before body end tag) and you’ll be scrolling smooth 😉

<script>
  lp.jQuery(function($) {

// The speed of the scroll in milliseconds
var speed = 1000;

// Find links that are #anchors and scroll to them
$('a[href^=#]')
  .not('.lp-pom-form .lp-pom-button')
  .unbind('click.smoothScroll')
  .bind('click.smoothScroll', function(event) {
    event.preventDefault();
    $('html, body').animate({ scrollTop: $( $(this).attr('href') ).offset().top }, speed);
  });
  });
</script>

Hi,

I am facing a problem with this code in my Page! I have used this code on my page but it doesn’t work properly. How can I have a solution?

Thanks in advance.

http://unbouncepages.com/hiit-max-landing-page/

Hmm, I have not experienced that. It usually works well on mobile too. But one thing you could do is…

1. Go into the mobile view, and bascially duplicate both the button and the box.

2. Reposition the new box where you need it to be for it to work perfectly just on mobile.

3. Update the link in the new button to match with the new box.

4. Next, hide the old button and box on the mobile view.

5. And lastly, go back to desktop view and hide the new button and box you created.

It’s a bit of a process, but this way you’d bascially have a separate button/box combo to position however you want for just mobile.

Hey @gaurav,

I had the same issue. What I do is place a small transparent box that is the same height as whatever my sticky header is, right above the section that I want the header button to scroll to.

Then just set the link of the sticky header CTA button to match the box ID. Just make sure the box is fully transparent and has no border.

There’s probably a better way to do this, but it works for me as a quick fix.

Regards,

Why are the children of the header box not appearing :-/ ? I pasted the .js code and updated the element id. :-/ Am I missing something? We are also using GA to track data.

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 currentPositionFromTop = $(window).scrollTop();

if (currentPositionFromTop > scrollPositionToShowHeader) {
(boxToFix).fadeIn(); (boxClone).fadeIn();
} else {
(boxToFix).fadeOut(); (boxClone).fadeOut();
}
}

$(window).scroll(function() {
showOrHideHeader();
});

I hope this helps someone.

Thanks,
Victor.

Hey @Nayon, if you’re looking for a footer you should be able to change the value of variable headerOrFooter to footer:

Hey, It worked! Thank you very much.

Though it gets fixed as header on the top of the page after scrolling, I was wondering how it could get fixed on the bottom of the page after scrolling.

Hey Can you tell me what I am doing wrong!

<script>

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

//Replace ID below with your own box ID
var boxToAppend = ‘#lp-pom-box-17’;

//Set to ‘header’ or 'footer’
var headerOrFooter = ‘header’;
var scrollPositionToShowHeader = 705;

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

Great! I will try to implement it and let you know.