I'm currently using Locomotive Scroll with NextJS to implement smooth scrolling. The web app that I'm currently developing with NextJS requires a fixed scrolling section, but unfortunately, I can't find any documentation on implementing fixed scrolling.
When I try to use the code snippet from the locomotive scroll website, the scrolling itself is being disabled. Here's the code snippet:
<section class="c-section -fixed" data-scroll-section data-persistent>
<div class="o-container" id="fixed-elements">
<div class="o-layout">
<div class="o-layout_item u-2/5@from-medium">
<div class="c-section_infos -padding" data-scroll data-scroll-sticky data-scroll-target="#fixed-elements">
<div class="c-section_infos_inner" data-scroll data-scroll-offset="200">
<h3>
04. <br />
Fixed elements
</h3>
<div class="c-sections_infos_text u-text">
<p>
Create slides that stick and untick to the viewport while scrolling through.
</p>
</div>
</div>
</div>
</div>
<div class="o-layout_item u-3/5@from-medium">
<div class="c-fixed_wrapper" data-scroll data-scroll-call="dynamicBackground" data-scroll-repeat>
<div class="c-fixed_target" id="fixed-target"></div>
<div class="c-fixed" data-scroll data-scroll-sticky data-scroll-target="#fixed-target" style="background-image:url('dist/images/locomotive04.jpg')"></div>
</div>
</div>
</div>
</div>
</section>
I really appreciate any help you can provide.