for a personal project I'm using Nextjs and locomotive-scroll, I'm trying to stick an element with position:sticky; and data-scroll-sticky but it's still not work, here is the code:
import LocomotiveScroll from "https://cdn.skypack.dev/[email protected]";
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 data-scroll data-scroll-sticky data-scroll-target="#section-1">
sticky content
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis suscipit ut orci nec malesuada. Integer condimentum auctor orci, non aliquam ex finibus blandit. Pellentesque suscipit mi egestas augue elementum consectetur. Sed suscipit, metus ut tempor
hendrerit, nulla leo auctor sapien, a mollis neque lorem vitae sapien. Curabitur eleifend, metus eu luctus malesuada, tortor est facilisis est, ut tempor libero lorem et nisl. Donec vitae gravida augue, in finibus lectus. Integer gravida elementum
mi ut ultricies. Mauris non blandit dui. Praesent quis ante et orci sollicitudin molestie feugiat ac magna. Sed vitae tincidunt urna, vitae placerat tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Vivamus molestie felis nibh, in lobortis purus malesuada ac. Proin pellentesque sodales quam, at lacinia odio cursus et. Vestibulum blandit felis quis orci tincidunt, sit amet dignissim nibh porttitor. Nullam urna lorem, convallis lacinia ipsum
sit amet, efficitur interdum elit. Donec sit amet lobortis nibh. Mauris molestie augue nunc. Nam eget lacinia nisl, ut ullamcorper nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam malesuada
pellentesque risus quis dapibus. Vivamus a enim iaculis, sollicitudin nisi a, dapibus lectus. Nullam malesuada est tortor, ut aliquet mi faucibus et. Suspendisse egestas tincidunt commodo. Quisque nibh metus, egestas et commodo quis, sollicitudin
eget justo. Proin vestibulum leo est, vitae euismod nibh ornare ac. Curabitur tempus orci metus, vel sodales dui malesuada ut. Integer lobortis eros justo, sit amet feugiat odio rutrum non. Pellentesque molestie porttitor est et tempus. Etiam quis
lorem urna. Quisque quam ex, pulvinar at eleifend nec, iaculis quis nisi. In feugiat laoreet consectetur. Suspendisse molestie, nibh ullamcorper suscipit cursus, diam libero consequat ex, in sodales est augue ut ante. Curabitur dapibus iaculis magna
nec cursus. Donec convallis iaculis massa nec vulputate. Etiam elementum, urna sit amet ullamcorper pretium, enim arcu tincidunt mauris, non laoreet augue felis eu felis. Praesent hendrerit ullamcorper maximus. In pretium dui vitae odio accumsan
ultricies. In interdum quis tortor quis viverra. Duis mi sem, cursus ac est sed, commodo venenatis ante. Proin ac ipsum nisi. Donec vestibulum ultrices risus, vitae aliquet quam rutrum eu. Suspendisse a arcu nec nulla molestie porta nec non enim.
Nulla facilisis, urna in convallis feugiat, ligula magna viverra ex, quis pharetra felis erat quis est. Proin dictum accumsan quam non fringilla. Etiam bibendum, ipsum non rhoncus malesuada, quam ligula cursus nisi, eget maximus erat odio nec enim.
Nunc ut porttitor nibh. Pellentesque neque velit, feugiat quis dapibus eget, ultrices ut odio. Fusce iaculis fermentum ipsum sed porta. Nam elit orci, euismod sit amet sapien vitae, mollis gravida ligula. Nulla egestas, est id rutrum consectetur,
arcu nibh gravida augue, sit amet efficitur magna enim in urna. Vestibulum eu lacus dictum, interdum ipsum ut, placerat enim. Quisque posuere mi turpis, quis placerat turpis mattis vitae. Nulla in felis at dui auctor aliquam blandit a mi. Cras vitae
viverra dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</div>
</section>
<section id="section-2" data-scroll-section>
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.
Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla
mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
</div>
</section>
</div>thank u all
CodePudding user response：
You need to include locomotive-scroll.css as stated in the documentation.
It should make your code work without the empty gap that appears at the beginning of the page. It will also add the CSS styling required for the locomotive-scroll to work properly.
import LocomotiveScroll from "https://cdn.skypack.dev/[email protected]";
const scroll = new LocomotiveScroll({
el: document.querySelector('[data-scroll-container]'),
smooth: true
});@import url(https://raw.githubusercontent.com/locomotivemtl/locomotive-scroll/master/dist/locomotive-scroll.css);
body {
padding: 0;
margin: 0;
}
.sticky {
position: sticky;
z-index: 1;
background-color: black;
color: white;
top: 0;
}
/*! locomotive-scroll v4.1.3 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */
html.has-scroll-smooth {
overflow: hidden;
}
html.has-scroll-dragging {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.has-scroll-smooth body {
overflow: hidden;
}
.has-scroll-smooth [data-scroll-container] {
min-height: 100vh;
}
[data-scroll-direction="horizontal"] [data-scroll-container] {
height: 100vh;
display: inline-block;
white-space: nowrap;
}
[data-scroll-direction="horizontal"] [data-scroll-section] {
display: inline-block;
vertical-align: top;
white-space: nowrap;
height: 100%;
}
.c-scrollbar {
position: absolute;
right: 0;
top: 0;
width: 11px;
height: 100%;
transform-origin: center right;
transition: transform 0.3s, opacity 0.3s;
opacity: 0;
}
.c-scrollbar:hover {
transform: scaleX(1.45);
}
.c-scrollbar:hover,
.has-scroll-scrolling .c-scrollbar,
.has-scroll-dragging .c-scrollbar {
opacity: 1;
}
[data-scroll-direction="horizontal"] .c-scrollbar {
width: 100%;
height: 10px;
top: auto;
bottom: 0;
transform: scaleY(1);
}
[data-scroll-direction="horizontal"] .c-scrollbar:hover {
transform: scaleY(1.3);
}
.c-scrollbar_thumb {
position: absolute;
top: 0;
right: 0;
background-color: black;
opacity: 0.5;
width: 7px;
border-radius: 10px;
margin: 2px;
cursor: -webkit-grab;
cursor: grab;
}
.has-scroll-dragging .c-scrollbar_thumb {
cursor: -webkit-grabbing;
cursor: grabbing;
}
[data-scroll-direction="horizontal"] .c-scrollbar_thumb {
right: auto;
bottom: 0;
}<div data-scroll-container>
<section id="section-1" data-scroll-section>
<div data-scroll data-scroll-sticky data-scroll-target="#section-1">
sticky content
</div>
<div>
ulum ultrices risus, vitae aliquet quam rutrum eu. Suspendisse a arcu nec nulla molestie porta nec non enim. Nulla facilisis, urna in convallis feugiat, ligula magna viverra ex, quis pharetra felis erat quis est. Proin dictum accumsan quam non fringilla.
Etiam bibendum, ipsum non rhoncus malesuada, quam ligula cursus nisi, eget maximus erat odio nec enim. Nunc ut porttitor nibh. Pellentesque neque velit, feugiat quis dapibus eget, ultrices ut odio. Fusce iaculis fermentum ipsum sed porta. Nam elit
orci, euismod sit amet sapien vitae, mollis gravida ligula. Nulla egestas, est id rutrum consectetur, arcu nibh gravida augue, sit amet efficitur magna enim in urna. Vestibulum eu lacus dictum, interdum ipsum ut, placerat enim. Quisque posuere mi
turpis, quis placerat turpis mattis vitae. Nulla in felis at dui auctor aliquam blandit a mi. Cras vitae viverra dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</div>
</section>
<section id="section-2" data-scroll-section>
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncte eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae,
eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget
dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncte eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut
metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncte eleifend tellus. Aenean leo ligula, porttitor
eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies
nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt
tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue
velit cursus nunc,Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque
eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.
Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus
varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem
neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis
leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
</div>
</section>
</div>