In this tutorial, we’ll show you the easiest way to create a sticky notification bar using jQuery. A sticky notification bar is a great tool for displaying important messages, updates, or feedback to users without disrupting their browsing experience. Whether you’re promoting a sale, announcing new features, or sharing urgent information, this simple jQuery solution will help you deliver messages in a highly visible, yet non-intrusive way. Be sure to check out the demo before we dive into the step-by-step guide!
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>
<a class="notify" href="#">Notify me</a>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:
Conclusion
You’ve now learned how to create a sticky notification bar with jQuery, a simple yet effective way to keep users informed without interrupting their experience. This customizable solution can be adapted to fit any website or application, making it a valuable tool for notifying visitors about important updates, promotions, or announcements. Feel free to experiment with design and functionality to better suit your needs. If you found this tutorial helpful, don’t forget to share it and explore more of our jQuery guides for further web development tips!