Ultra-small Sticky Notification Bar Plugin - jQuery notif

notif is an ultra-light jQuery notification plugin to display fixed notification bars with custom action buttons on the top of the webpage.

Ideal for product prompt bar, cookie notice bar, informational message bar, etc.

Fully responsive based on CSS flexbox. Smooth open/close animations are based on CSS3 transforms and transitions.

How to use it:

1. The plugin requires the latest jQuery JavaScript library to work.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>

2. Download and load the jQuery notif plugin's files in the HTML document.

<link rel="stylesheet" href="notif.css">
<script src="notif.js"></script>

3. The JavaScript to display a basic notification bar on the page.

notif('This is a text message!')

4. Insert a custom action button into the notification bar.

notif('A jQuery Notification Plugin', 'jQueryScript', 'https://jqueryscript.net')"

5. Customize the notification bars by overridng the following CSS styles.

div.notif{
  display: flex;
  position: fixed;
  top: -100px;
  left: 0;
  padding: 10px 60px;
  width: 100vw;
  min-height: 64px;
  justify-content: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  align-items: center; 
  -webkit-align-items: center;
  -moz-align-items: center;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  font-size: .9rem;
  color: white;
  background-color: #0076A0;
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.3);
  z-index: 4;
}

div.notif .button{
  display: block;
  margin: 0 30px;
  padding: 10px 20px;
  font-size: inherit;
  font-family: inherit;
  background: none;
  color: white;
  border: 1px solid white;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  cursor: pointer;
}

Changelog:

2022-09-05

• JS & CSS update

---

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