How to create a sticky title bar for your website

Question

I want to create a sticky title bar for my website just like the sticky title on this website (http://www.fizzysoftware.com/) if there is any one who can help me with the coding or any resources that can help me Create the same. Your reply will help me a lot.

Answer 1

If you want it to stay sticky when scrolling 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, it has some useful options

jQuery Sticky Title

Answer 2

Add

in CSS

position: fixed;

to your title element. It's really that simple. Next time, try right-clicking something you see on a website and selecting "Inspect Element." I think every modern browser has it now. Very useful feature.