How to create sticky header bar for a website

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.

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.

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