How To: Move Div With Scroll – Sticky

You might have seen a few blogs that has a div that starts moving when you’ve scrolled down to the element and then follows the visible area of the website. This can be achieved by using jQuery and a plugin called “Sticky”. This is how to implement it to your blog or website.

Move Div With Scroll

You might have noticed that I’m using this on my blog, the share element is stalking you as you scroll down the page, waiting for you to share… Scary right? All kidding aside, to use the sticky feature, all you have to do is this.
Download jQuery – or get it from Google (Make sure you got the latest version).

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js?ver=1.8.3"></script>

Download Sticky. When you’ve done that, add this code before </body> and change the location of the files (obviously).

<script src="jquery.js"></script>
<script src="jquery.sticky.js"></script>
<script>
  $(document).ready(function(){
    $("#sticker").sticky({topSpacing:0});
  });
</script>

To call the script, create an element with the ID=”sticker”. Like this:

<div id="sticker"></div>

Thanks to CodePen: Here’s another technique that does the same thing, it uses either Javascript, position:sticky or shim.

Here’s the official website of the jQuery Sticky plugin.