How to create sticky header bar for a website

Question

I want to create a sticky header bar for a website just like the sticky header on this website (http://www.fizzysoftware.com/) if any on can can help me out with coding or any resource that helps me to create the same. Your reply would be of great help to me.

Answer 1

In your CSS, add

position: fixed;

to your header element. It's just that simple, really. And next time, try to use right click on something you see on website and choose "Inspect element". I think that every modern browser has it now. Very useful function.

Answer 2

If you want to make it sticky when it's scroll down to a certain point then you can use this function:

$window = $(window);
$window.scroll(function() {
  $scroll_position = $window.scrollTop();
    if ($scroll_position > 300) { // if body is scrolled down by 300 pixels
        $('.your-header').addClass('sticky');

        // to get rid of jerk
        header_height = $('.your-header').innerHeight();
        $('body').css('padding-top' , header_height);
    } else {
        $('body').css('padding-top' , '0');
        $('.your-header').removeClass('sticky');
    }
 });

And sticky class:

.sticky {
  position: fixed;
  z-index: 9999;
  width: 100%;
}

You can use this plugin and it has some useful options

jQuery Sticky Header