Home » Tutorials » JavaScript » JQuery: Sticky Notification Bar

JQuery: Sticky Notification Bar

JQuery: Sticky Notification Bar

  • Stumble it!
  • Share

In this tutorial, we are going to teach you, the most easiest way to develop a sticky notification bar with JQuery. Such notification bar can be used to notify your user for latest updates, feedback message and etc. Please be sure to check out the demo, before we start the tutorial.

View Demo

Note: You may interested on our previous tutorial – "JQuery: Sticky Footer" as well.

Preparing HTML Structure

There is nothing much requirement for the HTML structure, what you need to do is adding 2 lines of following into your body of document:

<div id="note">Welcom to onlyWebPro.com</div>
<p><a href="#" class="notify">Notify me</a></p>

Note: You must assigned an ID for the notification bar and a class for the button that trigger the notification.

Style it

Let’s give some styling to the notification bar:

#note {
    position: absolute;
    z-index: 101;
    top: -100px;
    left: 0;
    right: 0;
    background: #fde073;
    text-align: center;
    line-height: 2.5;
    overflow: hidden;
    -webkit-box-shadow: 0 0 5px black;
    -moz-box-shadow:    0 0 5px black;
    box-shadow:         0 0 5px black;
}

As you can see that, we set the default value of top to negative 100px, so that the notification bar will not appear every time the page load.

Make it Work!

Now, it’s time to put some magic to make the notification works! First of all, please download the latest JQuery library from JQuery.com. Included the library in your document and let’s start our JQuery coding:

<script type="text/javascript" src="jquery.js"></script>
<script language="javascript">
$(document).ready(function() {
	
	$(".notify").click(function(e) {
		e.preventDefault();
		$("#note").animate({top: 0}, 300, null);
		//for css positioning prblem
		$("#note").css("position", "fixed");
		
		//Hide the bar
		$notifyTimer = setTimeout(function () { 
			$("#note").animate({top: -100}, 1000, function() {
					//change back to absolute
					$("#note").css("position", "absolute");
				});
			
		}, 2000);
	});
	

});
</script>

Code Explanation

  • $(document).ready(function() – We told the browser to get ready to execute the code when the DOM is ready.
  • When user click on the "Notify me" The script will start to execute series of animation / functions that placed inside the ‘$(“.notify”).click(function(e)
  • $(“#note”).animate({top: 0}, 300, null); – This is to animate the notification bar appear on the top of the browser.
  • $(“#note”).css(“position”, “fixed”); – This is important! In order to ensure the notifcation bar is always stick to the top of the browser, we have to change the value of position of the notification bar to fixed.
  • $notifyTimer = setTimeout(function () – Assigned a time out function to hide the notification bar.
  • $(“#note”).animate({top: -100}, 1000, function() – Animate the bar, make it slide up from the browser.
  • $(“#note”).css(“position”, “absolute”); – Change back the value of position, to prevent the error occur when user scroll the page.

That’s all! Simple right? Just share out this simplest tutorial to your community and your friends! Let’s put some efforts to make a better web community! Stay updates with us via:

View Demo

Please do let us know, if you have any thoughts / ideas on the comment section!


  • How To Create jQuery Password Strength Indicator in 10 Minutes!
  • Make A jQuery Sticky Header In 5 Minutes
  • Create Sequential Animations in jQuery

  • http://profile.yahoo.com/HSLQZIMVJH6AFFD2DL74IYM6SU Yasir

    need this onload

  • http://www.insightsoft.ae/ Professional Web Design

    Thanks!!!!!

    • http://www.onlywebpro.com onlyWebPro

      You’re welcome!

      Regards,
      The Management of onlyWebPro.com

  • http://www.webdesignbizz.com/categories-wordpress PSD To Wordpress

    Thanks for sharing such an excellent post, which is really helpful to me as well as others..Thanks again for this useful post…

    • http://www.onlywebpro.com onlyWebPro

      @PSD To WordPress:

      You’re welcome! Hope you enjoy it!

  • Wingmeistersmith

    Thanks! How do you use with onload and add delays?

  • Peter A

    The demo doesn’t seem to work: would you be able to fix that up? (Obviously I could try it out myself, but I’m trying to compare lots of different plugins and I like to be able to see how each one works very quickly.)

Android, iOS Development Tutorials