Love this one! So smooth, no blips. 

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

So glad to hear Finge!

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?

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!

Love this, Noah! Thanks for sharing.

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!

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

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.

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!

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

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?

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?

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

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

This solution is not responsive friendly 😦

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

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!

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

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.

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?

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

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

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') {

    backgroundCSSS"top"] = 'auto';

    backgroundCSSS"bottom"] = '0px';

    colorOverlayCSSS"top"] = 'auto';

    colorOverlayCSSS"bottom"] = '0px';

    childrenCSSS"top"] = 'auto';

    childrenCSSS"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.

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!