Here's What you'll Learn

Are you facing difficulties to check out menus when you scroll down your webpage? Then by using these simple methodologies, one can have fixed header for webpage. It will be quicker knowledge sharing for designing folks.

For any website the attractive design and functionalities are important. To enhance the design we can incorporate many small awe facts to the site. Likewise, Header fixed concept is one among them.

Header Fixed Concept

In this article, we are going to discuss the methods available for Header fixed concept and how it is implement in webpage code.

You can easily create sticky or fixed header using HTML and CSS fixed positioning. Apply the CSS style code for position property with fixed value in combination with the top. Property to place the element on the top of the view-port accordingly.

Solution 1: Using basic HTML and CSS

Step 1:

<html>
  <body>
  <header class=”sticky”>
  <div>
           <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    </ul>
        </div>
  </header>
        <div class=”content”>
        <p></p>
        </div>
        </body>
</html>

Step 2: Style for the above action

header {
position: fixed;
}

Css solution:

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

Solution 2: To fix a header on scroll solution

Create a header, which is scrolled to a certain limit in pixels and fix it to stay after a reaching the fixed limit.

We can implement this using HTML, CSS and jQuery code. See the demo for reference and also we have used separate class name “sticky” in header tag in this method.

Step 1:

$(window).scroll(function(){
    var sticky = $('header),
    scroll = $(window).scrollTop();
    if (scroll >= 100) sticky.addClass('.sticky');		
    else sticky.removeClass('fixed');
  });

Step 2: Css solutions

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

Solution 3: Implemented using HTML and JQuery

Html code: Creating a default html code in header tag. Then add a class name “fixed”.

<header class=”fixed”></header>

Step 1: Needed Css code

.fixed{
    position:absolute;
  }

Step 2: JQuery solution

Using JQuery the scroll position has been fixed. Once we reach the scroll position the header will be a constant. And if you use “Scroll back” option, it will remove the sticky effect.

Sample code for Header fixed option using JQuery and it will initiate when scrolling happens.

$(window).scroll(function(){
    var sticky = $('header),
    scroll = $(window).scrollTop();
    if (scroll >= 100) sticky.addClass('fixed');
    else sticky.removeClass('fixed');
  });