How to create sticky div on scroll

sticky div on scroll

Today, we will look at how to make a sticky div on scroll using a jquery plugin. It allows making any element on your page always stay visible.

You can implement this plugin to make the header, footer or sidebar sticky or fixed position, so it stays visible all the time.

The sticky is new in web designing and most use for the header and especially for the sidebar. The sticky js plugin provides you wide range of features.

How Sticky Work

When the target element is about to be hidden, the plugin will add the class className to it (and to a wrapper added as its parent), set it to position: fixed and calculate its new top, based on the element’s height, the page height and the topSpacing and bottomSpacing options.

Usage

You have to Include jQuery & Sticky and next you have to call sticky. Let’s have a look:

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

Edit your CSS to position the elements and to unstick an object.

<script>
  $("#sticker").unstick();
</script>

You May Also Like

Leave a Reply

Your email address will not be published. Required fields are marked *