[Tips & Scripts] Creating a Fixed Header/Footer (aka Sticky Header)

Show first post

156 replies

J

Hristian, 

Excellent points about creating a whole mini-site in Unbounce vs. the landing page approach. Aleks, have you tried running your paid traffic to a dedicated landing page instead? Would be curious to know if there were any lifts, and how this affected your conversion rates, 

F

Hi All, how can we add speed  for the header, i have added the header at second page but i dont want it to appear very fast, can you help me to slow it down 🙂

F

Hello there, what are really want is fading effect to the header actually, is there anyone to help me 🙂

F

solved 🙂

T

Hi, how did you add it starting on the second page

E

Hey guys,

I’m having some troubles with this.  

  1. Header is sticking but all elements (logo, phone number, CTA) are not visible.
  2. All elements on my page are pushed down.
    I’m assuming this is because of some conflicting CSS or JS? Any help would be greatly appreciated!
Hristian
Userlevel 7
Badge +3

Hi Elliott,

You are probably correct as to the cause of your issue but in order for us to be able to troubleshoot it for you, we need to see the actual page.

If you can provide us with a link, I’m sure the community here will try to help out.

Best,
Hristian

Hristian K. → experimentation-as-a-service → https://www.revise.agency/
R

Hi Matthew Dollinger,

Can you help me? I would like to do this with my landing page. Bar starts at the bottom of the page and then sticks to the top.

Thanks a lot!

G

Awesome!!! This is just what I needed.

J

Useful tip! Thank you very much!

S

Hi everyone. I love this tip/trick. Unfortunately, I am struggling to figure out why it is not working on my page.

Any ideas?

Here is the test page… http://www.uknowkids.com/test/

Hristian
Userlevel 7
Badge +3

Hi @Steven_Woda,

The link you’ve shared leads to a survey page rather than an Unbounce landing page.

Hristian K. → experimentation-as-a-service → https://www.revise.agency/
P

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!

Nayon
Userlevel 2
Badge +1

Hi,
I have successfully created the sticky footer with the script [ Thanks to @Johnny_Opao ] but what I want now is the fixed footer to appear after a certain scrolling of the page.

Say, if the visitor scrolls down 1000px, the sticky footer appears and it also disappears when the page reaches the bottom of the page!
Like the sticky footer on this page: https://zeusliving.com/landlord

Here is my Unbounce page: http://get.sonder.com/zeus-property-management/

The script I have used:

Where do I need to put the scrolling px?

@Hristian any idea?
Thanks is advance!

S

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

S

I have the same problem,
did you find the way to do it?

Nayon
Userlevel 2
Badge +1

No! Unfortunately I haven’t!

S

Hey I found it out!

you have to add:

var scrollPositionToShowHeader = 691;

(instead of 691 you have to write the number of pixels after wich you wish the header to appear)

It works for me!

Nayon
Userlevel 2
Badge +1

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

cliclocal

This is great, I have it working however the text I placed on my button is off center, I tried everything to center it but no luck.

see on mobile - www.ericasplumbing.com/plumbing

Any ideas?

Dean

Nayon
Userlevel 2
Badge +1

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

Jess
Rank
Userlevel 7
Badge +1

Hmmm, @Noah or @Rob do either of you have any insight into fixing a sticky nav into the footer?

J

Nice addition to the script, @Victor_Adascalitei! Curious to see what else you’ve been able to whip up in Unbounce. 🙂

Srish

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.

G

Hi @Johnny_Opao & @Justin,
This was quick & easy and looks nice. I’ve connected the CTA to a form on the page but what I notice is that clicking the CTA in the sticky header scrolls the page to the form but part of the form opens below the sticky bar. Is there a way to avoid that?
Regards,
Gaurav

Reply


Terms & ConditionsCookie settings