[Tips & Scripts] Fading Fixed Header

Noah
Userlevel 7
  • Noah
  • Former Unbouncer
  • 126 replies

tips-scripts-banner

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.

🚨

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.
Copy and paste the following snippet in the Javascript section with placement ‘Before Body End Tag’.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

This is the reference to the jQuery library. Next, paste the fading_fixed_header.js Javascript code below the snippet.

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!

25 replies

J

Love this one! So smooth, no blips. 

Finge
Userlevel 6
Badge +4

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

Finge
Noah
Userlevel 7

So glad to hear Finge!

Joe_Savitch

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?

Noah
Userlevel 7

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!

Stefano
Userlevel 7
Badge +4

Love this, Noah! Thanks for sharing.

J

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!

Noah
Userlevel 7

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

Finge
Userlevel 6
Badge +4

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.

Finge
Noah
Userlevel 7

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!

digibomb
Userlevel 6
Badge +1

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

H

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?

I

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?

D

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

Noah
Userlevel 7

@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!

T

This solution is not responsive friendly 😦

K

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

R

Hi, I added the script to my page, and it looks great! However I don’t want to have the fixed header in the mobile view, and although I disabled it from the Page Content list in Unbounce, there must be something in the code that ignores that and still displays it in mobile. Anyone with the same issue? Thanks!

mclopezz

Love this! Anyone know how to add a shadow to the bottom of the fixed header? 🙂

R

Hi, Can I add a fade out height as well? I only want the header to be present from for a certain part of the page.

Iago_Araujo

Gave it a try and the text that i placed on my box is moving sideways when i plubish the page!!
anyone has the solution?

Lasse1

@ddimatteo this should work:

  <style>
    /* Update #lp-pom-box-53 with the ID of your landing page's box element. */  
    #lp-pom-box-274, #lp-pom-box-274-color-overlay {display: none;}

    @media screen and (max-width: 1000px) {
      #lp-pom-box-274,
      #lp-pom-box-274-color-overlay {
      	display: none !important;  
      }
    }  
      
    </style>
H

Hi, did you ever get a resolution to this issue?

M

I can’t seem to make my headerbar sticky. I created a box element in the top of my page and
I have changed the box ID to the ID of my box in the javascript. Can somebody help me look into where the mistake can be?

http://borsenlive.dk/bec/

Script looks like this:

<script>
//Fading Fixed Menu, modified from Fixed Menu v1.3.1

//Replace ID below with your own box ID
var boxToAppend = '#lp-pom-box-522';
//Choose pixel height of when menu fades in. Use the height of a page section like this: $("#lp-pom-block-93").height();
var showHeight = 800; 

//Set to 'header' or 'footer'
var headerOrFooter = 'header';

var backgroundCSS = {"position":"fixed", "left":"0", "top":"0px", "bottom":"auto", "width":"100%", "z-index":"9999"};
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":"9999", "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);
      
var bothBoxes = boxToAppend + ', ' + boxToAppend + '-color-overlay';
$(window).scroll( function() {
  if ($(this).scrollTop() > showHeight) {
    $(bothBoxes).fadeIn();
  } else {
    $(bothBoxes).fadeOut();
  }
});
</script>

When I then add the stylesheet for fading, the bar completely disappears. So it seems that the stylesheet part triggers but the script for the bar has an error.

Thanks in advance.

P

Hi everyone !
I’m trying to use it on my page with a setTimeout instead of a scoll, in order to have the footer fade in after a certain time, but I can’t make it work 😦 any idea how I should do it? Thx in advance!

Reply


Terms & ConditionsCookie settings