Working on a personal project, I have been experimenting with Nextjs and locomotive-scroll. I am attempting to use position:sticky; along with data-scroll-sticky, but unfortunately the desired functionality is not working as expected. Here is the code snippet:
import LocomotiveScroll from "https://cdn.skypack.dev/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a9c5c6cac6c4c6ddc0dfcc84dacadbc6c5c5e99d8798879d">[email protected]</a>";
const scroll = new LocomotiveScroll({
el: document.querySelector('[data-scroll-container]'),
smooth: true
});body {
padding: 0;
margin: 0;
}
.sticky {
position: sticky;
z-index: 1;
background-color: black;
color: white;
}<div data-scroll-container>
<section id="section-1" data-scroll-section>
<div class="sticky" data-scroll data-scroll-sticky data-scroll-target="#section-1">
sticky content
</div>
<div>
<!-- Placeholder text omitted for brevity -->
</div>
</section>
<section id="section-2" data-scroll-section>
<div>
<!-- More placeholder text omitted -->
</div>
</section>
</div>Thank you in advance for any assistance!