Hi Guys, as you all are aware about the parallax scrolling applications. In these applications when you scroll the page a particular part of the section becomes sticky and fixed at the top at the time of scrolling, until next section approaches it. Many jquery plugins are available for the same effects, but we can achieve the same result with Css’s position property.

Let’s start by creating the HTML structure.

       <html>

Section 1 Heading

Section 2 Heading

Section 3 Heading

Section 4 Heading

Section 5 Heading

</html>

I’m using a basic structure of a parallax application. In this case the div with the class box sticks to the top of that section until that is scrolled up completely and the same process will be followed by other box classes.

Now we will write some css to make the sticky scrolling.

   .content{
       width: 100%;
       float: left;
       padding-top: 20px;
       background: #ccc;
       text-align: center;
       min-height: 500px;
     }
    
     .content .box{
       position: -webkit-sticky;
       position: sticky;
       top: 0;
     }

In the above css, I have used position: sticky, this is the main property to achieve the sticky scrolling effect.

In this way we can create a normal section to sticky scrollable.