[Tips & Scripts] Fading Fixed Header

ui
navigation

#1

This solution allows you to create a full-width header, have it fixed to the top of your page, and have it fade in and out when a user scrolls on your landing page. This is a great way to hold off on showing your header/navigation until you feel it is needed. This can help create a clean, uncluttered look for your pages. This solution builds on Johnny’s ‘Sticky Header’ Community post.

1) See the Fading Fixed Header effect in action here
2) Download the .unbounce template here.

**************************
WARNING: YOU ARE ENTERING DEVELOPER TERRITORY
Please note: This is not an official Unbounce feature. This functionality is based entirely on third party code, and has only been tested in limited applications. Since this isn’t a supported Unbounce feature, our support team will be unable to assist if things go awry. So if you are not comfortable with HTML, Javascript and CSS, please consider consulting an experienced developer.
**************************

Scripts Needed:

Grab the latest fading_fixed_header.css and  fading_fixed_header.js files here:

https://gist.github.com/noahub/58e1b5be59799a9c79f7fa73e9ba9ce8

Instructions:

Step 1.
Create a box element in the editor for your fixed header and style it to your liking.

Step 2.
Paste the fading_fixed_header.js Javascript code in the Javascript section with placement ‘Before Body End Tag’.

Step 3.
Replace “#lp-pom-box-53” with the ID of your box from Step 1.

Step 4.
Set the value of the ÒshowHeightÓ variable. This is the height (in pixels) where the Fixed Header will fade in. The larger the value, the more visitors will have to scroll before the Fixed Header fades in.

Step 5.
Paste the fading_fixed_header.css code into your Stylesheets section.

Step 6.
Replace both instances of Ò#lp-pom-box-53Ó with the ID of your box from Step 1.

Bonus: This solution can also be used for a Fading Fixed Footer. In the fading_fixed_header.js javascript, simply change the “headerOrFooter” variable from ‘header’ to ‘footer’.

Testing:
Like anything else you implement on your page, you’re going to want to test this out thoroughly to see what effect (if any) it has on your conversion rates. We recommend running an A/B test and segmenting a small portion of traffic towards the page - just to be safe.

Conclusion:
We would love to see how you implement this on your own pages. This is your chance to get creative and show the Unbounce community how you’re using this.


Did you find this tip useful? Did you test this on your landing page? Let us know in the comments below!


The Ultimate List of Unbounce Tips, Scripts & Hacks
Does anyone know how to create a scrolling form bar that sticks to the top of the page?
#2

Love this one! So smooth, no blips. 


#3

Ooooh. Supersmooth! Implemented as soon as I saw this! Thank you!!


#4

So glad to hear Finge!


#5

Gave it a shot… decided to stay with the sticky header for the time being. But, it was super easy to install and use. Will def. use it on a future project. 

Is there a way to add any transition to the way it appears? Or would that be way more css?


#6

This solution uses the jquery .fadein and .fadeout methods in the fading_fixed_header.js javascript snippet. A quick way of changing the way your navbar appears would be to pass ‘duration’ and ‘easing’ options to these methods. You can read more here: http://api.jquery.com/fadein/.

If you’re looking for something drastically different this might require a bit more custom coding.

Hope this helps!


#7

Love this, Noah! Thanks for sharing.


#8

How can I make it work on mobile? I loaded your demo page on my mobile device and it’s broken. I tried making this work on my landing page and it wont work on mobile. Please help, thanks!


#9

Nice catch! I actually hadn’t formatted the mobile layout of my demo page, which is why the header wasn’t displaying correctly. After updating the mobile layout, it looks like the script is working as expected (take a look here).


#10

Has anyone else come across an issue where the fading_fixed_header.js prevents the built in lightbox to work? I had an issue where what should have loaded in a lightbox opened in a new tab. Only when I removed the JS did the issue go away.


#11

Hey Finge, I haven’t run into this issue before. The demo page (see here) actually uses the built-in lightboxes and they seem to be working well.

Would you be able to link to the problem page? I’d be happy to take a look!


#12

Anybody have any z-index issues? Many of my elements are appearing above the header even though there z-index is lower.


#14

Hey there, anyone having trouble with having the header visible from the start, and fade away as soon as you start scrolling? From that point on it starts working correctly, but I just see the header already when I land on my page.

I use two sticky headers. One which stays sticky all the time, and one fading over the first one after X px. Could those be conflicting, and causing the trouble?


#15

Love this, but I think I’m doing something wrong…probably a simple solution but I’m a newbie, here. The header works properly, but all the elements in the section (logo, image, CTA) show initially in the second section and do not appear on the header when it appears at all. It’s just a white bar on top of the page. Any suggestions?


#17

Hi! Is there a way to have the fixed header stick to the Header of the Desktop and Footer of Mobile?


#18

@ddimatteo I’d recommend changing lines 9-10 of the javascript snippet to look like this:

  //Set to 'header' or 'footer'
  var headerOrFooter = 'header';
  if ( lp.jQuery(window).width() <= 600 ) {
    headerOrFooter = "footer";
  }

This essentially changes the header to a footer if the window size is less than or equal to the 600px breakpoint. Give it a try and let me know how it goes!


Fading Fixed Header/Footer for Desktop and Mobile
#19

This solution is not responsive friendly :frowning:


#20

Tried but the element within the box is not sticking to the footer. Any advise?