Sticky divisions on websites are used to drag attention of readers to a particular section. For example, you have a subscribe box that is floating down the page as the user scrolls through it’s browser’s window. Such a floating, dynamic sticky-scroll effect can be created using jQuery.

This tutorial is all about creating sticky-scroll effect with any element on your website using jQuery, and all this without making use of any additional jQuery plugins.

jQuery Sticky scroll: Code and Explanation

There are a lot of sticky-scroll jQuery plugins available online for free that you may incorporate in your projects to bring about the sticky-scroll effect on your websites. I do not use plugins particularly to make divisions scroll on my websites since I have written this code that works pretty well to get a division sticky-scrolling.

What we are going to create

We will be creating a sticky-scrolling box that will float down the webpage till it encounters it’s limit. The limit would be pointed by any webpage element till it has to scroll down.

We will provide a separate class (or ID) to our sticky-scroll box and then use jQuery to control the box with the help of that class. Lets say, our sticky division carry the class ‘sticky-scroll-box‘. (You should add this class to your box before proceeding to the rest of the tutorial.)

Concept: The idea behind our sticky scroll box is to add some custom styling (CSS) to it when our webpage is scrolled up or down. The CSS will carry some positioning (position: fixed;) and layering (z-index) information in a class (say .fixed, and we’ll hook this class to our box when our webpage is scrolled up or down and our box changes it’s original position. We’ll remove the .fixed class from our box when it reaches it’s original position.

Starting off with the coding, add the below given CSS code to the stylesheet file of your webpage. The code contains the positioning info that our sticky-scroll division will carry, and we’ll add the class .fixed to it through jQuery.

.fixed {
  position:fixed;
  top:0;
  z-index:99999;
}

[wp_ad_camp_1]

Now, we need to add some jQuery code to our webpage to make the sticky-scroll effect work. Before proceeding, make sure you’re calling the standard jQuery library in your webpage. Copy and paste the below given code just below the <head> section of the HTML of your webpage.

<script type="text/javascript">
$(document).ready(function () {  
  var top = $('.sticky-scroll-box').offset().top;
  $(window).scroll(function (event) {
    var y = $(this).scrollTop();
    if (y >= top)
      $('.sticky-scroll-box').addClass('fixed');
    else
      $('.sticky-scroll-box').removeClass('fixed');
    $('.sticky-scroll-box').width($('.sticky-scroll-box').parent().width());
  });
});
</script>

Now, reload to test the sticky-scroll on your webpage. See the demo of our sticky-scroll or download it using below links, and let us know your thoughts or any problems you’re facing with it, I’ll try best to sort them out.