Sticky Header Notification Bar Plugin - jQuery stickyalert.js

stickyalert.js is a jQuery plugin to create a customizable, dismissable, cookie-enabled notification bar that remains fixed to the top after scroll. Perfect for implementing the EU cookie law notice.

Installation:

# NPM
$ npm install jquery-sticky-alert --save

# Bower
$ bower install jquery-sticky-alert

How to use it:

1. Place the stickyalert plugin's stylesheet in the document's head section.

<link href="jquery.stickyalert.css" rel="stylesheet">

2. Create an element which will be served as the container for the sticky alert.

<div id="alert-container"></div>

3. Place jQuery JavaScript library and the stickyalert plugin's JavaScript file at the end of the document so the page loads faster.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.stickyalert.js"></script>

4. The JavaScript to create a basic alert notification on page load.

$('#alert-container').stickyalert({
  barText: 'jQueryScript',
  barTextLink: '//www.jqueryscript.net', 
});

5. Customize the alert notification with the following settings.

$('#alert-container').stickyalert({

  // background color
  barColor: '#222',

  // text color
  barFontColor: '#FFF',

  // font size
  barFontSize: '1.1rem',
  
  // cookies Expiration Date
  cookieRememberDays: '2' 

});

Change log:

v0.1.6 (2018-01-31)

• JS Update

---

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