Making smart sticky elements by using a jQuery plugin
Sometimes when I surfing the Internet I see the sticky elements that applied on website. Most often it’s a sticky ads that placed in sidebar. Sticky ad is an ad unit that stays in place while the page scrolls. Some are fixed completely when others (often placed at the end of sidebar content) scroll until they are in view then stay in a fixed position as the user scrolls further down the page.
They are good at catching the user’s eye. Sticky ad units contribute uplift in performance metrics such as CTR and CPM without hurting quality. Actually we can use them not only for ad units, but also for sign-up boxes, message display, etc. In this article, you’ll see how easy it is to make a smart sticky elements by using the Sticky-Kit jQuery plugin.
If you are using an ad network please confirm with them before using sticky ads with their ads. Some ad networks (AdSense is one of them) see using this technique as a violation to their terms of service and might ban you in case they become aware of it.
Include the jQuery library
Before we can begin working with jQuery, we must add the jQuery library to our project. If you haven’t done that already, then you can read this article to find out how to do it.
Include the Sticky-Kit script
We will include the latest version (for April 2017 it’s a v1.1.2) of the Sticky-Kit to our website. For this we download the compressed version of the
sticky-kit.js script from the official Sticky-Kit page and copy it into our existing project directory.
The compressed version of the
sticky-kit.jsscript is named
Now we need to find the file of our theme that is responsible for the HEAD section of our website. Depending on your website platform (WordPress, Joomla, Jekyll, and etc) this file may have the name such as
default.html, or another name. Then we place the following code before the closing
</head> tag in this file:
In the code line above we do not have the
/sticky-kit.min.jsin the code line above is a path to the
sticky-kit.min.jsfile which we copied into our project. You may need to fix this path depending on the location of your
This will ensure that the
sticky-kit.min.js script will be included to every page of our website.
Apply the Sticky-Kit to DOM element
In this example, we made that the whole sidebar act as a sticky element. We can do the same with any other element simply by replacing the
#sidebar with the appropriate class name or ID of the DOM element.
You can find more examples of use on the official Sticky-Kit page and the Sticky-Kit Wiki.
That’s it, you’re done. Now you know how to make a smart sticky elements by using the Sticky-Kit jQuery plugin. So simple isn’t it?
If this article has helped you then please leave a comment
Thanks for reading!
Arthur is a designer and full stack software engineer. He is the founder of Space X-Chimp and the blog My Cyber Universe. His personal website can be found at arthurgareginyan.com.