jQuery Top Sticky Notification Bar with topper.js

A lightweight jQuery plugin to create top sticky, close-able full width notification bar on the top of the page. The topper.js offers to show multiple types (success, warning, danger & info) notifications to the users.

How to Use Top Sticky Notification Bar :

1. Load the jQuery and Topper JS and CSS files into HTML document.

<!--jQuery 3.3.1-->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script>

<!--Topper Js-->
<script src="js/topper.js"></script>

<!--Topper CSS-->
<link rel="stylesheet" href="css/topper.css">

2. Create sticky notification bar on the top of page that will be disappear after the given time.

Topper({
  title: 'My Alert', //title for the alert message
  text: 'This is my sample info notification.', //the notification text
  style: 'info', //style of the notification
  type: 'top', 
  autoclose: 5000, //disappear after 5 seconds
});

All available styles are as follows:

1. success
2. info
3. warning
4. danger

3. If you would like to customize the plugin styles you can add your custom CSS. Just add the styles into topper-custom class.

.topper-custom{
   /* Your own css */
} 

Then add custom into style attribute.

Topper({
  title: 'My Alert',
  text: 'This is my custom styled notification.',
  style: 'custom',
  type: 'top',
  autoclose: false
});

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.