If your webpage gets long, you may have the desire to keep some form of branding on your website for readers to always see as they scroll through your content. This approach achieves that in a subtle yet effective way without being overly pushy.

Here it is in action.

See the Pen Sticky Header by Richard (@barkins) on CodePen.

You can apply these principles to other elements on your webpage, but I recommend using this technique judiciously and not over do it. Sticky elements on a page can oftentimes have unintended side effects, which I’ll cover briefly at the end.

HTML

Nothing out of the ordinary in the HTML, just straightforward HTML5 tags for the header and article areas.

<header id="header">
  <h1>Sticky Header</h1>
</header>

<article>
  
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tempus dui nisi, a tincidunt nisi consequat id. Donec auctor tortor rhoncus hendrerit.......</p>

<p>....</p>
<p>....</p>
<p>....</p>
  
</article>

CSS

For styling, the only element you’ll really need is a sticky class with the following properties.

.sticky {
  position:fixed;
  display:none;
}

Additionally, the header should be styled so that its width is 100%, or you will need to add that width size to the sticky class. I’ll leave it up to you to see what happens if you don’t set a width to 100%.

Here’s all the CSS put together.

* {
  box-sizing:border-box;
  font-family:sans-serif;
}

body {
  margin:0;
  background:#c6c6c6;
}

#header {
  background:rgba(47,85,131,.9);
  padding:25px;
  text-align:center;
  color:#FFF;
  width:100%;
}

.sticky {
  position:fixed;
  display:none;
}

article {
  padding:25px;
}

jQuery

We start with creating a function that will store some position values, along with the element we want to be sticky.

var stickyHeader = function(){
  //THE POSITION OF TOP OF PAGE IN BROWSER WINDOW
  var windowTopPosition = $(window).scrollTop();
  
  //THE POSITION OF ARTICLE TOP
  var triggerContainer = $('article').offset().top;

  //THE THING THATS STICKS
  var stickyContainer = $('#header');
}

Next up, we’ll need to test if the position of windowTopPosition is greater than triggerContainer and if it is, go ahead and add the sticky class to the container we want to be sticky.

  if (windowTopPosition > triggerContainer) {    
    stickyContainer.addClass('sticky');
    stickyContainer.slideDown('fast');
    
  }else{
    stickyContainer.removeClass('sticky');
    stickyContainer.css("display","");
  }

If you noticed in the CSS previously, I included display:none in the sticky class styling, it’s because I also wanted it to slide down when the container became sticky. Otherwise the transition from non-sticky to sticky header can be a bit jarring.

This occurs when the if/else statement is true, I also included a stickyContainer.slideDown('fast'); which in effect brings the container out of hiding with a nice animation.

One key thing here is, if the user goes back to the top, although the sticky class will be removed, the display:block portion left behind by slideDown() will remain, destroying the slideDown() effect.

This is why I included the following jQuery function to fix it.

stickyContainer.css("display","");

Of course none of this function will work unless we trigger it somehow and we do that whenever the user scrolls on the page, like so.

$(window).scroll(stickyHeader);

Here’s the whole jQuery code put together.

var stickyHeader = function(){
 
  //THE POSITION OF TOP OF PAGE IN BROWSER WINDOW
  var windowTopPosition = $(window).scrollTop();
  
  //THE POSITION OF ARTICLE TOP
  var triggerContainer = $('article').offset().top;

  //THE THING THATS STICKS
  var stickyContainer = $('#header');
  
  if (windowTopPosition > triggerContainer) {    
    stickyContainer.addClass('sticky');
    stickyContainer.slideDown('fast');
    
  }else{
    stickyContainer.removeClass('sticky');
    stickyContainer.css("display","");
  }
  
  
};

$(window).scroll(stickyHeader);

You may now think you can apply this technique to other elements on your page, but be warned, whenever you apply a fixed styling to an element, the element gets moved out of its container and may end up covering up portions of content on your site. You have been warned.