Sticky Alerts: A New, Tiny jQuery Plugin

A super tiny sticky alerts plugin

Why?

Just because. Sticky Alerts can be downloaded here, and a demo can be seen here.

This pen from Thommy Browne caught my eye. The sticky alert bar was made with some very simple jquery and a bit of CSS.

I’ve been quickly increasing my JavaScript knowledge and figured I’d try creating a legit jQuery plugin, using the code from Thommy Browne. After a couple hours of tinkering, I had it! I was really surprised how easy it is to create a jQuery plugin, even adding options to plugins is crazy easy.

So, if nothing else, this was simply an exercise in creating a jQuery plugin.

Get It

You can see the plugin in action at https://sticky.longren.io/, which is hosted on GitHub Pages. The plugin itself can be downloaded from GitHub. The JavaScript is incredibly small, a total of 36 lines, which could easily be condensed into about 5 lines.

jQuery Sticky Alerts is available under the MIT license and is free for use on personal or even commercial projects.

Using the plugin is extremely easy. Just define the container you want the alert to sit in, make sure jQuery and jquery.stickyalerts.js (and jquery.stickyalerts.css) is loaded, define some options, and you’re set!

You can also use jQuery Sticky Alerts with bower and npm.

You can see usage instructions at the GitHub project page. Below are the options in use on the demo page:

Get It For WordPress

Mike Smith was generous enough to build a WordPress plugin using my Sticky Alerts jQuery plugin. The plugin is called Guerrillas Sticky Bar and can be found at the WordPress plugins page.

Provide Feedback

I’m new to building jQuery plugins, so let me know if I’ve made any errors or if you see anything I could be doing better (I want to learn!!). You can leave a comment on this post or create an issue at GitHub. Pull requests are also welcome! :)

If you decide to use Sticky Alerts in a project, I’d love to know about it! Just drop a link in the comments.