jsa

jquery-sticky-alert

A minimal jQuery plugin to add a sticky alert bar to the top of your website. Demo at https://sticky.longren.io/

Showing:

Popularity

Downloads/wk

4

GitHub Stars

77

Maintenance

Last Commit

4yrs ago

Contributors

2

Package

Dependencies

1

Size (min+gzip)

0.6KB

License

Type Definitions

Tree-Shakeable

No?

Categories

Readme

jquery-sticky-alert

A minimal jQuery plugin to add a sticky alert bar to the top of your website. Inspired by this pen on CodePen. A demo can be found running at http://sticky.longren.io, which is hosted on GitHub Pages.


Installation

Install manually

Include jquery.stickyalert.js after including jQuery itself:

<script src="/path/to/jquery.stickyalert.js"></script>

Also include jquery.stickyalerts.css:

<link href="/path/to/jquery.stickyalert.css" rel="stylesheet" type="text/css" />

or

Install using Yarn:

yarn add jquery-sticky-alert

or

Install using npm:

npm install jquery-sticky-alert

Usage

I usually add this in my <header> area, after jQuery and jquery.stickyalert.js have been loaded.

$(document).ready(function() {
    $('#alert-container').stickyalert({
        barColor: '#222', // alert background color
        barFontColor: '#FFF', // text font color
        barFontSize: '1.1rem', // text font size
        barText: 'I like bass and car audio :)', // the text to display, linked with barTextLink
        barTextLink: 'https://www.longren.io/', // url for anchor
        cookieRememberDays: '2', // in days
        displayDelay: '3000' // in milliseconds, 3 second default
    });
});

You'll also need a div with id alert-container, according to the usage example above, at least:

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

Your alert-container will contain the sticky alert. :)

Issues

If you nocitce any problems, please submit an issue. GitHub issues

How to Contribute

  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create new Pull Request

##A Screenshot jQuery Sticky Alert Screenshot

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial