Use Sticky-Kit to make elements stick.

Sticky-Kit is a jQuery plugin for making sticky elements.
If you have a sidebar menu you might want to find a way to keep it in view even as the user scrolls down the page.

How is this done? It is done with a jQuery plugin called Sticky-Kit. Sticky-Kit will help you keep the shorter column stuck to the top of its parent container.

Look at the image below. There is a div (the parent) with two other divs inside.With Sticky-Kit you can keep the shorter div in view as the user scrolls down the page.

 

sticky_kit01
How do you use Sticky-Kit?
Visit this link to download the jQuery file.

sticky_kit02

When you visit the Sticky-Kit webpage, Right-click on Full Source and select Save link as… Save the file to your computer and call it “jquery.sticky-kit.js”

Now that you have your jQuery file, what do you do with it? In the root folder of your website create a folder called “js” (there is a good chance you already have a folder with this name). This folder is where you can put all your jQuery script files. Copy the “jquery.sticky-kit.js” file you just downloaded to your “js” folder.

Tell your webpage where to find the jQuery file. Scroll down to the bottom of your HTML code and just before the closing <body> tag type in the “script src” as shown below.

<script src="/js/jquery.sticky-kit.js"></script>
</body>
</html>

Give your side menu the id “#sidebar”. Use this id to allow you to target the div you want to make sticky. Now you need to add one more line of code to the bottom of your HTML.

<script src="/js/jquery.sticky-kit.js"></script>
<script>$("#sidebar").stick_in_parent();</script>
</body>
</html>

For more details on how to use Sticky-Kit visit the website

Leave a Comment