This time I will share jQuery Plugin and tutorial about Sticky Notification Bar In jQuery – notificationBanner, hope it will help you in programming stack.
notificationBanner is a small (less than 1kb) yet configurable jQuery plugin to create banner-style notification bars that will be fixed on the top or bottom of the webpage.
Smooth & performant slide in/out animations based on CSS3 transition and transform properties.
Ideal for informational messages, cookies/GRPR notices, discount information, etc.
How to use it:
1. Insert the minified version of the notificationBanner plugin after loading jQuery library (slim build is recommended).
2 |
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" |
3 |
crossorigin="anonymous"> |
5 |
<script src="src/jquery.notificationbanner.min.js"></script> |
2. Create an empty container to place the notification bar.
1 |
<div class="myNotice"></div> |
3. The JavaScript (jQuery script) to create a basic notification bar displayed at the bottom of the webpage.
1 |
var notification = $('.myNotice').notificationBanner({ |
2 |
text: "A Default <a href="https: |
4. Stick the notification bar to the top of the webpage.
1 |
var notification = $('.myNotice').notificationBanner({ |
2 |
text: "A Default Notification Bar", |
5. The plugin also supports HTML content in the notification bar. For example, you can insert a custom action button inside the notification bar.
1 |
var notification = $('.myNotice').notificationBanner({ |
2 |
text: "Notification Bar <button>CTA Button</button> <script></script>" |
6. Customize the appearance (height, width, padding, background color) of the notification bar.
1 |
var notification = $('.myNotice').notificationBanner({ |
This awesome jQuery plugin is developed by MANOJMANI07. For more Advanced Usages, please check the demo page or visit the official website.
