onlyWebPro .com - For Designers & Developers

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:

• onlyWebPro Facebook Fan Page
• onlyWebPro Twitter Page
• onlyWebPro Google Plus Network

View Demo

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