如何使用机车在滚动时将文本粘贴到窗口顶部？

问题描述

我在网页上使用 locomotive 并尝试创建一个从窗口底部开始的粘性元素，然后当我滚动它时它会移动到窗口顶部并停留在那里，同时我继续向下滚动页面.

我尝试在文档页面上这样做，但它最终只是一个普通的滚动元素......感谢任何帮助。

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 供参考

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）