How to create a website title bar

Question

I want to create a sticky title bar for a website, like a sticky title on this website (http://www.fizzysoftware.com/), if any of them can help me with coding or any resource that helps me to create the same. Your answer helped me a lot.

Answer 1

In your CSS add

position: fixed; 

to the title element. It is just that simple. And next time, try right-clicking on what you see on the website and selecting "Inspect Item". I think every modern browser has it now. Very useful feature.

Answer 2

If you want to make it sticky when scrolling down to a certain point, 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