我在网页上使用机车并尝试创建一个粘性元素，该元素开始位于窗口底部，然后当我滚动时它移动到窗口顶部并在我继续向下滚动页面时停留在那里。
我尝试在文档页面上这样做，但它最终只是一个普通的滚动元素......感谢任何帮助。
jQuery(document).ready(function ($) {
(function () {
const scroll = new LocomotiveScroll({
el: document.querySelector('[data-scroll-container]'),
smooth: true,
class: 'aos-animate'
});
})();
});.content {
display: inline-block;
}
.content > div {
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
}
.content-1 {
display: block;
width: 22vw;
height: 17vw;
margin-left: 52.1vw;
margin-bottom: 1.2vw;
}
.content-2 {
margin-left: 4vw;
width: 43vw;
height: 27vw;
}
.content-3 {
margin-left: 4.7vw;
width: 38vw;
height: 20vw;
margin-bottom: 7vw;
}
.content-4 {
margin-left: 16vw;
width: 35vw;
margin-top: 1.1vw;
height: 21vw;
}
.content-5 {
margin-left: 4vw;
margin-bottom: auto;
display: inline-block;
width: 24vw;
height: 16vw;
float: right;
margin-top: -6vw;
margin-right: 19.1vw;
}
.content-6 {
margin-left: 5vw;
margin-right: 13vw;
margin-bottom: 9vw;
height: 13vw;
width: 14vw;
}
.content-7 {
width: 41vw;
height: 22vw;
margin-top: 1vw;
margin-right: -4vw;
}
.content-8 {
height: 30vw;
width: 17vw;
margin-right: 2vw;
/* margin-bottom: -6vw; */
/* margin-right: 4vw; */
float: right;
margin-top: -11vw;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.min.js"></script>
<section data-scroll-container id="scroll-target">
<div data-scroll-section>
<p>Position me at the bottom of the window (not the bottom of the entire web page) and then I'll reach the top on scroll</p>
</div>
<div data-scroll-section class="layout-one">
<div data-scroll class="content content-2 aos-init aos-animate">
<div style="background-image: url('https://picsum.photos/200/300');">
</div>
</div>
<div data-scroll class="content content-3 aos-init aos-animate">
<div style="background-image: url('https://picsum.photos/200/300');">
</div>
</div>
<div data-scroll class="content content-4 aos-init aos-animate">
<div style="background-image: url('https://picsum.photos/200/300');">
</div>
</div>
<div data-scroll class="content content-5 aos-init aos-animate">
<div style="background-image: url('https://picsum.photos/200/300');">
</div>
</div>
<div data-scroll class="content content-6 aos-init aos-animate">
<div style="background-image: url('https://picsum.photos/200/300');">
</div>
</div>
<div data-scroll class="content content-7 aos-init aos-animate">
<div style="background-image: url('https://picsum.photos/200/300');">
</div>
</div>
<div data-scroll class="content content-8 aos-init aos-animate">
<div style="background-image: url('https://picsum.photos/200/300');">
</div>
</div>
</div>
</section>Codepen供参考