14

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.

Arsh Kapoor
  • 185
  • 2
  • 2
  • 7
  • 1
    possible duplicate of [Sticky header CSS / JS](http://stackoverflow.com/questions/6913086/sticky-header-css-js) – Luke Woodward Nov 03 '12 at 23:10
  • Possible duplicate of [Sticky Header after scrolling down](http://stackoverflow.com/questions/18382496/sticky-header-after-scrolling-down) – rene Jan 10 '16 at 21:21
  • This should not be considered the duplicate because it's the only one of the three with a good answer. – Nobody Sep 11 '19 at 19:20
  • check my [medium article here](https://dioxmio.medium.com/sticky-done-the-right-way-880af0122a71) which should be helpful :) – Jose Greinch Dec 23 '20 at 09:39

5 Answers5

18

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.

MichalHlavacek
  • 324
  • 3
  • 15
8

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

Danish Iqbal
  • 111
  • 1
  • 3
4

CSS already gives you the answer. Try this out

.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

now add the class sticky to any menu sidebar or anything you want to stick to the top and it will automatically calculate the margin and stick to the top. Cheers.

S.Yadav
  • 4,273
  • 3
  • 37
  • 44
jerryurenaa
  • 3,863
  • 1
  • 27
  • 17
0

If you want simplicity in a HTML and CSS option to create a Stiky NavBar you can use the following: Just create a navbar like this one:

<nav class="zone blue sticky">
      <ul class="main-nav">
          <li><a href="">About</a></li>
          <li><a href="">Products</a></li>
          <li><a href="">Our Team</a></li>
          <li class="push"><a href="">Contact</a></li>
  </ul>
  </nav>

Remember to add the classes in this case I created a Zone (to separate my HTML in specific areas I want my CSS to be applied) blue (just a color for the nav) and sticky which is the one that gonna carry our sticky function. You can work on other attributes you want to add is up to you. On the CSS add the following to create the sticky; first I am gonna start with the zone tag

.zone {
    /*padding:30px 50px;*/
    cursor:pointer;
    color:#FFF;
    font-size:2em;
    border-radius:4px;
    border:1px solid #bbb;
    transition: all 0.3s linear;
}

now with the sticky tag

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

Position fixed meaning it will always be in the same position; and with top 0 I will always be at the top and a 100% width so it covers the whole screen. And now the color to make our navbar blue

.blue {
    background: #7abcff;

You can use this example to create a sticky navbar of yours and play around with the CSS properties to customize it to your liking.

Hasan Patel
  • 412
  • 7
  • 19
0

Try This

Add this style to the corresponding 

style="position: fixed; width: -webkit-fill-available"

OR

<style>
.className{
    position: fixed; 
    width: -webkit-fill-available;
}
</style>
Merrin K
  • 1,602
  • 1
  • 16
  • 27