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

navigation
ui
design

#63

Hi Aleks, 

You seem to have the placement of the JS script set to “After Body Tag” and it needs to be “Before Body End Tag”. 

Give it a try and let us know.

Best,
Hristian

P.S. It looks like you’ve built a whole website in Unbounce.
Interesting use case, although not really what Unbounce is meant to do.
Keep in mind that if you are pushing paid traffic to this page, it might not convert as well as a dedicated landing page with a single call to action and no links leading away/distracting your visitors.


#64

Hi Hristian, thanks for your response. Well, actually, I just tried that recently since I wanted to see if that was perhaps the source of the problem. Of course with “After Body Tag” the JS is not applied and the page looks like it should without the fixed header. I set it (back) to “Before Body End Tag” now, kindly check again, if you can. Thanks!


#65

Hi! Sorry, just found the problem - I applied the code to the block instead of the box. Works (for) now! Thanks!


#66

Woo-hoo! Problem solved. :) 


#67

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, 


#68

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 :slight_smile:


#69

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


#70

solved :slight_smile:


#71

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


#72

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!

#73

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


#74

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!


#75

Awesome!!! This is just what I needed.


#76

Useful tip! Thank you very much!


#77

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/


Sticky Header/Footer on Mobile
#78

Hi @Steven_Woda,

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


#79

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!


#80

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!


#81

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


#82

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