QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Carbon Ads Creating A Sticky Header

Creating A Sticky Header

sticky-header

In this post I will be providing best and easiest solution to implement a sticky header in your website. Its no brainer to create a sticky header. There has been many solutions to create a sticky header. In this post I will provide my favourite ways of doing it.


We can create a sticky header using JavaScript and without using JavaScript.

Sticky Header Using JavaScript

To create a sticky header we need to know pageYOffset and offsetTop.

Now we can check if the header has been scroll up using this condition
headerElement.offsetTop <= window.pageYOffset

This is an example event handler to check if the header is scrolled up or not

window.addEventListener("scroll", function(){
            if(header.offsetTop <= window.pageYOffset)
            {
                //make it sticky
                header.style.position = "fixed";
            }
            else
            {
                header.style.position = "static";
            }
}, false);

Sticky Header Using CSS3

CSS3 supports sticky value for position property. Its the easiest way to create a sticky header.

            #header
            {
                position: sticky;
                position: -webkit-sticky;
                position: -moz-sticky;
                position: -ms-sticky;
                position: -o-sticky;
                /* top distance from the window. Its has to be defined otherwise sticky won't work. */
                top: 0px;
            }

The problem with this property is that its not yet supported by many web browsers.

We can check if sticky css value is supported or not by this snippet

if (!window.getComputedStyle(document.querySelector('#header')).position.match('sticky')) {
    console.log("not supported");
}

Sticky position is relative to its containing block i.e., if the containing block goes out of viewport then the element is no more sticky.

There is a Polyfill for position sticky position–sticky-. We can use this if browser doesn’t support sticky natively.

Jun 15, 2014Narayan Prusty
Creating Offline Applications using HTML5 TutorialGenerating Random Color's In JavaScript

Leave a Reply Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

Image8 years ago Web Development
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
  • Sticky Header Using JavaScript
  • Sticky Header Using CSS3
Related Articles
  • Creating a Percentage of Webpage Scrolled Indicator
  • Creating Triangles And Circles Using CSS
  • Lazy Loading Images And Its SEO Impact
  • How To Detect Element Entered Viewport
  • Understanding Javascript Events In Depth
Our Sponsor
My Books

2014 - 2015 © QNimate
All tutorials MIT license