Home » Tutorials » JavaScript » Make A jQuery Sticky Header In 5 Minutes

Make A jQuery Sticky Header In 5 Minutes

Make A jQuery Sticky Header In 5 Minutes

  • Stumble it!
  • Share

Many of us have seen this sticky page header effects – The page header is initially on its original place above the content, but as soon we start scrolling down the page, it sticks at the top of the page. When we scrolling up the page, the sticky header stops sticking and returns to its original position.

Still not understand what I’m talking about? No worry, I thought I should give you a simple example. Let’s take a look on the demo before we proceed to tutorial section.

View Demo

The HTML Structure

In this tutorial, we will create a sticky ribbon, where a normal looking ribbon suddenly sticks to the page when the page is scrolled. I’m sure you are already familiar with HTML elements. In this example, we are going to start out with the following:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo: jQuery Sticky Header On Scroll | onlyWebPro.com</title>
</head>
<body>
<div id="demo_wrapper">
  <div id="logo">
    <h1>Make Money</h1>
  </div>
  <!-- END logo -->
  <div id="stickyribbon">
    <ul>
      <li><a href="http://www.investopedia.com/investing/investing-basics/" target="_blank">Investing-Basics</a></li>
      <li><a href="http://www.investopedia.com/investing/bonds-and-fixed-income/" target="_blank">Bonds &amp; Fixed Income</a></li>
      <li><a href="http://www.investopedia.com/forex/" target="_blank">Forex</a></li>
      <li><a href="http://www.investopedia.com/investing/fundamental-analysis/" target="_blank">Fundamental Analysis</a></li>
    </ul>
  </div>
  <div id="page_content">
    <p>This is a demo page of "<a href="http://www.onlywebpro.com/2013/03/04/make-a-jquery-sticky-header-in-5-minutes/" title="Learn to develop jQuery Sticky Header">Make A jQuery Sticky Header In 5 Minutes</a>" post. If you want to find out more about making jQuery Sticky Header, pleae log on to <a href="http://www.onlywebpro.com" title="Web Development Tutorial Website">onlyWebPro.com</a>.</p>
    <h2>Introduction To Growth Investing</h2>
    <p>People have many different styles and tastes when it comes to money, but making your money grow is typically considered the most fundamental investment objective. The best way to accomplish this goal will vary according to factors such as the investor's risk tolerance and time horizon. But there are some principles and techniques that are applicable for many different types of investors and growth strategies. </p>
    <p><img src="money.jpg"  width="860" height="600" alt="wall street - New York Stock Exchange" /><br />
      <em>Image courtesy of Kadellar (Wikipedia.com)</em></p>
    <h3>Types of Growth Investments</h3>
    <p><em><strong>Small-Cap Stocks</strong></em><br />
      The size of a company is based on its market capitalization, or net worth. There is no exact, universal definition of what is considered to be "small cap" compared to micro, mid or large cap, but most analysts classify any company with a capitalization of between $300 million and $2 billion as a small-cap firm. Companies in this category are often still in their initial phase of growth and their stocks have the potential for substantial appreciation in price. Small-cap stocks have historically posted higher returns than their blue-chip cousins, but they are also considerably more volatile and carry a higher degree of risk. Small-cap stocks have also often outperformed large-cap stocks during periods of recovery from recessions.</p>
    <p><em><strong>Technology and Healthcare Stocks</strong></em><br />
      Companies that develop new technologies or offer innovations in healthcare can be excellent choices for investors who are looking for a home-run play in their portfolios. The stocks of companies that develop popular or revolutionary products can rise exponentially in price in a relatively short period of time. For example, the price of Pfizer was just under $5 a share in 1994 before Viagra was released. This blockbuster drug took the company's stock price to above $30 a share over the next five years, thanks to FDA approval of the drug in 1998.</p>
    <p><em><strong>Speculative Investments</strong></em><br />
      Thrill seekers and speculators look to high-risk growth instruments such as penny stocks, futures and options contracts, foreign currency and speculative real estate such as undeveloped land. There are also oil and gas drilling partnerships and private equity for aggressive investors in high income brackets. Those who pick the right choices in this arena can see a return on capital of many times their initial investment, but they can also often lose every cent of their principal.</p>
    <h3>The Bottom Line</h3>
    <p>Growth investing is a complex subject that is often closely coupled with other subjects such as fundamental analysis, technical analysis and market research. There are many more growth strategies used by individual and institutional investors, and a complete listing of them is far beyond the scope of this article. For more information on growth strategies for your investments, consult your broker or financial advisor. </p>
    <hr />
    <p>Notes: Contents are retreives from <a href="http://www.investopedia.com" target="_blank">Investopedia.com</a> for demostration purpose only.</p>
  </div>
</div>
<!-- END demo_wrapper -->
</body>
</html>

As you can observed from the above HTML structure, we have a main container with named “demo_wrapper“. Inside, we have “logo“, “stickyribbon” and “page_content” divisions. The “stickyribbon” is the main focus element in this tutorial. We are going to add some JavaScript later, to make it become “sticky” when users scrolling down the page.

The CSS

<style type="text/css">
body {
	background: #E8E9E4;
	font-family: Arial,sans-serif;
	padding: 20px 0;
}

h1 {
	color: #28639c;
    font-size: 60px;
    font-weight: bold;
    letter-spacing: -6px;
    margin: 0;	
}

h2 {
	border-bottom: 1px solid #ddd;
	color: #28639C;
	font-size: 24px;
	font-weight: bold;
}

p {
	margin: 0 0 25px;	
}

a {
	color: #28639C;
}

#demo_wrapper {
	background: #fff;
	-moz-box-shadow:    0 0 8px 0 rgba(0, 0, 0, 0.1);
  	-webkit-box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
  	box-shadow:         0 0 8px 0 rgba(0, 0, 0, 0.1);
	margin: 0 auto;
	width: 960px;	
}

#logo {
	padding: 40px 50px 30px;	
}

#stickyribbon {
	background: url(ribbon_corner.png) no-repeat center bottom;
	color: #fff;
	height: 60px;
	margin-left: -20px;
	width: 1000px;
}

#stickyribbon ul {
	list-style-type: none;
	margin: 0 10px;
	padding: 10px 40px 15px;
	-moz-box-shadow:    0 12px 5px -6px rgba(0, 0, 0, 0.5);
  	-webkit-box-shadow: 0 12px 5px -6px rgba(0, 0, 0, 0.5);
  	box-shadow:         0 12px 5px -6px rgba(0, 0, 0, 0.5);
}

#stickyribbon ul li {
	display: inline;
	font-size: 16px;
	font-weight: bold;
	margin: 0 20px;
}

#stickyribbon ul li a {
	color: #fff;
	text-decoration: none;
}

#stickyribbon ul li a:hover {
	color: #c9e0f7;	
}

#page_content {
	padding: 30px 50px;	
}
</style>

The CSS styling for this tutorial is pretty simple, I’m not going to go into details on every single style, let’s just concentrate on these two – “#demo_wrapper” & “#stickyribbon“. As you observed, the width of the #demo_wrapper & #stickyribbon is slightly different, we make the #stickyribbon wider than the #demo_wrapper to create the illusion of wrapping the #demo_wrapper.

Here is the ribbon that we are using. You can wither create your own or use the following image.
Sticky Ribbon

The JavaScript

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	var stickyRibbonTop = $('#stickyribbon').offset().top;
	 
	$(window).scroll(function(){
		if( $(window).scrollTop() > stickyRibbonTop ) {
			$('#stickyribbon').css({position: 'fixed', top: '0px'});
		} else {
			$('#stickyribbon').css({position: 'static', top: '0px'});
		}
	});
});
</script>

Now is the time to apply some magic to our ribbon. At first, we include the latest jQuery library from Google directory. Next, we determine the offset of the “stickyribbon“. Once done that, we bind the scroll event to window object, then we start checking IF window.scrollTop exceeds the #stickyheader’s offsetTop, we simply set #stickyheader’s css as position: fixed; top: 0px. As soon as window.scrollTop drops below the offset, we make it stick back to its original position using position: static, the default positioning of the element.

We’ve done!

View Demo

Conclusion

You’ve just learned to make a jQuery ribbon, sticks at the top of the page when scrolling down and return to its original position when scrolling up the page.


  • Enhancing Google Map Interactivity with jQuery
  • How To Create jQuery Password Strength Indicator in 10 Minutes!
  • Create Sequential Animations in jQuery

  • jongen

    This is really cool! Do you have any ideas on how to fix the jitter, or jumpiness, that appears at the transition point, when the ribbon becomes fixed and the rest of your code suddenly jumps up the page?

    • http://www.onlywebpro.com onlyWebPro

      Thank you for you comment!

      So sorry that, i have no idea how to fix the jumpiness that happens during the transition time. :(

      I was doubting is that could be solve using CSS 3 Transition?

  • Talooz

    how to make it work inside of an iframe ?

  • Billy Goforth

    I have this applied to

  • Archibald Leitch

    Does anybody know why my sticky ribbon keeps jumping to the left once the page has scrolled down and the ‘stickiness’ has kicked in? I’ve tried everything….

    • http://www.onlywebpro.com onlyWebPro

      Would you mind to paste your code here? or do you have your works in any URL?

    • Smashbox

      Because the css is bad. The wrapped should be wrapped again and the new wrap should have the height of the sticky header. Otherwise it jumps and looks like shit as it does in this tutorial.

      • http://www.onlywebpro.com onlyWebPro

        Thanks for pointing out the error. Thanks again.

  • Parrage

    My page has a very long scroll and after a certain point, the text menu moves below the ribbon, can anyone suggest what I can do, thanks

  • Parrage

    This is the page I am working on http://www.paparazzicarnival.com/test.html

  • Parrage

    My page has a very long scroll and after a certain point, the text menu moves above the ribbon, can anyone suggest what I can do, thanks. This is the page I am working on http://www.paparazzicarnival.com/test.html

    • http://www.onlywebpro.com onlyWebPro

      Hi Sorry for late replied.

      Here is 1 of the solution:
      Adjust the top padding of the text menu when user start scroll and adjust it again when the page is scrolled back to its original position. Example:

      if( $(window).scrollTop() > stickyRibbonTop ) {
      $(‘#stickyribbon’).css({position: ‘fixed’, top: ’0px’});
      $(‘#stickyribbon ul’).css({padding-top: ’10px’}); // adjust the text menu when scroll start
      } else {
      $(‘#stickyribbon’).css({position: ‘static’, top: ’0px’});
      $(‘#stickyribbon ul’).css({padding-top: ’18px’}); // adjust the text menu when back to original position
      }

  • IzirAtig

    How I make this work when I have 100% width image above sticky element so I don’t have specific height of the space above.

    • http://www.onlywebpro.com onlyWebPro

      Hi, do you mind to provide your code sample in JSFiddle?

      • IzirAtig

        I already solved this by putting the image in absolute positioned div with width same as images height and padding-bottom 100% and overflow visible

      • http://www.onlywebpro.com onlyWebPro

        Glad to hear that! Well done!

Android, iOS Development Tutorials