Липкая прокрутка с помощью Divi

Шаг 1

Загрузите файл шаблона раздела отсюда шаблон липкой прокрутки

После загрузки шаблона json загрузите его в свою библиотеку divi, чтобы вы могли использовать его на любой странице в качестве раздела.

Шаг 2

Добавить ниже css в Divi -> Параметры темы -> Пользовательский 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);
}
 }

Шаг 3

Добавьте ниже javascript для этой функции липкой прокрутки, я использовал плагин Custom Css and Js, установите плагин и добавьте через него приведенный ниже JScode, вы можете использовать любой другой плагин, который вам нравится.

<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>

вы можете изменить пороговое значение до 1, что означает, что когда элемент находится на 100% в области просмотра, 0,5 лучше всего работает в этом случае.

Шаг 4

Когда все настроено и сделано, просто импортируйте раздел (раздел, который вы импортировали ранее в библиотеку divi) на любую страницу и измените содержимое или просто используйте как есть.

Заключение

После правильной настройки всего этого вы можете просмотреть страницу, и прикрепленный раздел должен выглядеть так, как показано ниже (обратите внимание, что он не оптимизирован для мобильных устройств, для мобильных устройств вы можете сделать дополнительный раздел и скрыть его, при этом мобильные устройства будут накладываться друг на друга)