Hello,

this is very helpful but I am looking for a script, that keeps the sizes of my ID-element and is not a header.
How can I not change the sizes and the position of my Box element?

Also:

My box element scrolling should only move if User scrolls further down than a specified position, for example after 3000px scrolling down the script should start moving the box element when user scrolls down. In the opposite the box element should not go further up than a specified position. Is this possible somehow?

Thanks in advance!

Hi!
Is it possible to turn a box in the middle of the page into a fixed header as soon as the user scrolls down?
When applying your code the box goes at the top of the page from the beginning.

Thanks
Silvia

No! Unfortunately I haven’t!

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

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

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 @Nayon, if you’re looking for a footer you should be able to change the value of variable headerOrFooter to footer:

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.

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.

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,

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.

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/

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>