Sticky Scroll Using Divi

Demo of sticky scroll

Step 1

Download the section template file from here sticky scroll template

After downloading the json template , upload it in your divi library so you can use it in any page as section.

Step 2

Add below css in Divi -> Theme options -> Custom css

/* sticky scroll */
.container-sticky .et_pb_module.active {
 display:flex;
}
.container-sticky .et_pb_module {
 display:none;
}
.container-sticky .et_pb_module.active  .et_pb_text_inner{
     animation: fade 1s cubic-bezier(0, 0.62, 0.27, 1.24);
}

@keyframes fade {
0% {
    opacity: 0;
    transform: translateY(30px);
}

100% {
    opacity: 1;
    transform: translateY(0px);
}
 }

Liked this tutorial? You can show Support by giving onetime payment on patreon

Step 3

Add below javascript for this sticky scroll functionality , I have used Custom Css and Js plugin, install the plugin and add the below JScode through it, you can use any other plugin you like.

<script>
 const stickyColumn = document.querySelectorAll(".container-sticky .et_pb_module");
 const contentColumn = document.querySelectorAll(".content_section .et_pb_module");

// initialize tab items with index data
function seedIndexData(){
let i = 0
stickyColumn.forEach(item=> {
item.setAttribute('data-index',i)
i++
})
 let j = 0
contentColumn.forEach(item=> {
item.setAttribute('data-index',j)
j++
})
}
seedIndexData()

// observe content section to show relevant sticky content


function addActiveClass(data) {
  stickyColumn.forEach((item) => {
    if (item.getAttribute("data-index") == data) {
      item.classList.add("active");
    } else {
      item.classList.remove("active");
    }
  });
}

const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        let index = entry.target.getAttribute("data-index");
        addActiveClass(index);
      } else {
      }
    });
  },
  {
    threshold: 0.5,
  }
);
contentColumn.forEach((elems) => {
  observer.observe(elems);
});

</script>

you can change the threshold to upto 1 which means when the element is 100% in the viewport, 0. 5 work best in this case

Step 4

Being everything set and done, just import the section (the section you imported earlier in divi library) in any page and change the content or just use as it is.

Conclusion

After setting all this correctly you can view the page and the sticky section should look like below, (do note its not mobile optimised, for mobile you can do additional section and hide this one with mobile one being stacking on each other)

Liked this tutorial? You can show Support by giving onetime payment on patreon