How to Add a Fixed Header That Fades In on Scroll

This script adds a full-width header that stays fixed to the top of the page and fades in once the visitor scrolls past a set point. It keeps the top of the page uncluttered and shows navigation only when it's useful. The same script can also create a fixed footer.

You can also download a ready-made .unbounce page to import.

This is community code, not an official Unbounce feature. Unbounce Support can't troubleshoot custom code. Test it on a published page before relying on it, and work with a developer if you aren't comfortable editing HTML, JavaScript, and CSS.

Before you start

The fading_fixed_header.js and fading_fixed_header.css files are hosted on GitHub as Fading Fixed Header.

Add the header to your page

1. Add a box element for the header and style it.
2. In the JavaScripts section, add the following snippet with placement set to Before Body End Tag. It loads the jQuery library.

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

3. Paste the code from fading_fixed_header.js below the snippet.
4. In the script, replace #lp-pom-box-53 with the ID of your box.
5. Set the showHeight value. This is how far down the page, in pixels, the visitor scrolls before the header fades in.
6. Copy the code from fading_fixed_header.css into the Stylesheets section.
7. In the CSS, replace both instances of #lp-pom-box-53 with the ID of your box.
8. Save and republish the page.

To create a fixed footer instead, change the headerOrFooter variable in the script from header to footer.

Test the change

Run an A/B test with a small share of traffic to confirm the header doesn't lower your conversion rate.