How To Make Sticky Elements In Your Site Via StickyJS?

In your website, maybe you want to make the specific element sticky when it is scrolled to. And why you want to make so for your site? Maybe, you want to focus the user on that very portion of your site which is very important to them as well as for your site. For eg: you can make the subscription box sticky when scrolled to or make the menu sticky to make the menu easily available for the user to navigate to. So, now you may know about basic on this about why to create sticky elements in your site. Hence, let’s move ahead and learn about how to make sticky elements in your site via stickyjs, shall we?

What is stickyjs?

Well, stickyjs is jQuery library to make any element in your site once scrolled to, to be sticky, ie, always visible. You can find more details on this in it’s GitHub repo.

As here we are learning about how to make sticky elements in your site via stickyjs, as from the description of it, we can assure that we can use it for this very purpose on our site. Hence let’s dive ahead and learn about how to do so for your site, shall we?

How to make sticky elements in your site via stickyjs?

For this, first of all, you need to find about about which element you want to make them sticky. You can do the inspect element via the browser for same and find out the exact id or class where that element is situated. You can find out here Apply Custom CSS Code In Your Site Via Inspect Element about in more details.

Now, first of all what we have to know is, since it is jQuery library, we need to first load jQuery library and then stickyjs library. So, let’s move ahead and do the needy work, shall we?

As we are more familiar with WordPress, and our most of the tutorial covers WordPress too, we will work on our WordPress site, however you can do the same via Custom HTML template too.

Now, first of all, you need to download the stickyjs library through their site or their GitHub repo. After that, you need to extract the library file where ever needed within the theme, maybe inside js or assets/js folder. Now, you need to enqueue it via wp_enqueue_scripts WordPress hook. So, for this, lets open up functions.php file of the theme and enqueue it.

And also, since it will require custom js too, we need to enqueue our custom js file too within the theme. So, let’s move ahead and do so pasting the below PHP code in functions.php file of the theme:

So, the final enqueue code will be as below:

There in the above PHP code, you just need to provide the exact path to the file, where you have added the library file as well as the custom JS file too. Now, let’s move ahead and make sticky elements in your site via stickyjs with custom required JS code, shall we? You can learn about more on WordPress enqueue method here: Enqueue Custom CSS And JavaScript Libraries In WordPress.

Required custom JS setting to make sticky elements in your site via stickyjs

As you may have learned from above that you need to enqueue the stickyjs library file as well as the custom JS too, the remaining part is custom JS to make the elements sticky when scrolled to. So for this, you may have already found the required id or class to make that element sticky. If not then, you can find about how to find it here: Apply Custom CSS Code In Your Site Via Inspect Element.

Now, let’s add the below jQuery code to make the found out element sticky:

Here, in our case, we are making the site menu sticky, finding out the div as #site-navigation. While, in your case, it might differ. You can see that id in the browser console as below. And you can see after the navigation, there is header image displayed.

Output of how to make sticky elements in your site via stickyjs

Now, when we applied the above method, we can see that, the menu always sticks at top of the browser as in the screenshot below, while the other elements added in the site scrolls upside it:

You may also want to read:

  1. Tutorial On Creating WordPress Child Theme
  2. How To Change Default Gravatar On WordPress
  3. Integrate Bootstrap Responsive Table In WordPress Theme
  4. Display Image Caption Under Featured Images In WordPress
  5. Remove WordPress Generator Tag

Conclusion

If you have followed up the tutorial properly and now can easily make sticky elements in your site via stickyjs within your site then, we can say that you are now more familiar on this than before. However, if you are still confused on the same and want to know more about it then, do drop the comment below in the comment box and we will follow it up.

Post navigation

Bishal Napit

Bishal Napit is a WordPress theme developer from Tansen, Palpa, with a passion to learn more on WordPress.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.