Perfectly fix header bar when user scrolls down

Perfectly fix header bar when user scrolls down

Fixing header bars or certain sections of a website is a common practice. Web developers often fix header bar to gather more attention from the visitors.

Usually header bars containing important information and effective items are fixed. The reason is simple, when your user scrolls down your website content; the content keeps on changing. The top material of your website will obviously be different from that of the bottom. So, web developers fix header bar or an aside element to highlight important aspects on the website; certain things that must be always fed into the mind of the visitors.

So, let us have an overlook of what all things can be put on a header or aside element that helps the website’s purpose –

  1. Header bars containing categories or pages of a blog is very common. This ensures proper and easier navigation for the visitor. They are free from the hassles of finding out where the category list or page list is.
  2. Promotional offers are often listed on fixed top bars of a website. This is extremely popular because they attract special attention of visitors and increase sales.
  3. Aside bars are also use for the above purpose. Aside bars can also be fixed with the concept of this article.
  4. Other examples include social sharing options getting fixed when the browser top margin reaches the social sharing bar itself.

The question is how to do this? I am sure you might be rushing through my article’s first few paragraphs and saying to you; “where’s the main matter?”

Well, without any more waste, let’s head straight into the technique to fix header bar.

Fix header bar using this unique concept

I call this a unique concept because this has not failed for me in both of my attempts. This might not be something new but it is really helpful. So, I felt I should share it with all those who have tried it themselves but couldn’t succeed.

Fix header bar with a clean graphic understanding of a website’s structure. In that way, you would understand each step and also wouldn’t fail.

Look at the below image to understand what we want to do.

perfectly-fix-header-bar-on-scroll-diagram

Suppose we want to fix header bar containing category lists in the above website. So, what we have before the bar is of prime concern.

Dealing with distance calculation between elements and responsive heights

Our calculations are simple. We would check whether the browser top point has reached the category bar or not while the user is scrolling. Each time the user scrolls up and down, this check is made and then the fix – unfix is done with the help of JQuery.

So, from the image you can see that for best results we calculate the height of all elements that graphically appear before the category bar. In this way, we get the exact distance between the starting point of our website and the starting point of the category bar.

For responsive designs or fluid height elements, we have a great solution. Our procedure follows a dynamic height calculation method. So, our height calculation would not be affected by differences in responsive design or traditional designs.

Basically each time the scroll event is fired; the height calculation is done with the help of JQuery height method. That is why we call our method dynamic.

Codes to fix header bar

The idea is all explained; so no rocket science anymore. Just read through the codes and you’ll get to understand every bit.

The JavaScript scroll event is fired whenever the scroll bar of the browser is moved by the user. Within this method, the height is first calculated and then measured in simple mathematical calculations to check whether the category bar is reached or not.

                    // this function is called each time the user scrolls
                    $(window).scroll(function(){
                        fix($(this).scrollTop()); //current value of scrolltop is passed as parameter
                   });

            // Function definition. Please change ids and classes as and when needed.
            function fix(scroll){
                if(scroll-($('firstbarid').height()+$('secondbarid').height()+$('idofthebartofix').height()) >= 0){
                    $("idofthebartofix").css('position','fixed').css('top','0').css('left','0'); 
	        }
                else{
                    $("idofthebartofix").css('position','relative');
                }
            }   

Here’s the JQuery code for the action. Enjoy and do let me know in comments if you still find it hard to understand. I would love to help you. For demos, check my blog itself. It has a fixed bar and also another fixed social sharing bar.

Comments are closed.