Forums

chinmay_9279

How can i make a facebook like fixed header which is first displayed as menu , and after when we cross it's division (or watever) by scrolling, the menu gets fixed at the top of the screen ! If there is a name for this particular 'thing' plz do inform me.

And if i have recreated this topic than i m really sorry, u can just provide me the link of the respective discussion thread.

chinmay_9279

by 'menu' i meant it is at some specific height in the page with respect to the TOP of the page.

HugoGiraudel

JavaScript version:


.sticky {
  position: fixed;
  top: 0;
}
.header {
  width: 100%;
  background: #F6D565;
  padding: 25px 0;
}





var header = document.querySelector('.header');
var origOffsetY = header.offsetTop;

function onScroll(e) {
  window.scrollY >= origOffsetY ? header.classList.add('sticky') :
                                  header.classList.remove('sticky');
}

document.addEventListener('scroll', onScroll);

CSS version:

.sticky {
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  top: 15px;
}

Support right now is Chrome 23.0.1247.0+ (current Canary) and WebKit nightly.

More informations here: http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit

HemZone

Above solution is not working in IE.

Here is fix for cross browser.

http://viralpatel.net/blogs/demo/jquery/scroll-fix-header-facebook/

stevencrader

If it is already at the top of the page and you want to keep it there, use position: fixed. There shouldn't be a need for any javascript/jquery.

http://codepen.io/stevencrader/pen/vKesG

treehouse : what would you like to learn today?

Forums

Facebook like header with fixed position !