Sticky Notification Bar In jQuery - notificationBanner

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).

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" 
        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 
        crossorigin="anonymous">
</script>
<script src="src/jquery.notificationbanner.min.js"></script>

2. Create an empty container to place the notification bar.

<div class="myNotice"></div>

3. The JavaScript (jQuery script) to create a basic notification bar displayed at the bottom of the webpage.

var notification = $('.myNotice').notificationBanner({
    text: "A Default Notification Bar"
});

4. Stick the notification bar to the top of the webpage.

var notification = $('.myNotice').notificationBanner({
    text: "A Default Notification Bar",
    position: "top"
});

5. The plugin also supports HTML content in the notification bar. For example, you can insert a custom action button inside the notification bar.

var notification = $('.myNotice').notificationBanner({
    text: "Notification Bar <button>CTA Button</button> <script><\/script>"
});

6. Customize the appearance (height, width, padding, background color) of the notification bar.

var notification = $('.myNotice').notificationBanner({
    height: "20px",
    padding: "10px",
    background: "#7ee68b",
    width: "100%"
});

---

This awesome jQuery plugin is developed by MANOJMANI07. For more Advanced Usages, please check the demo page or visit the official website.