Javascript 如何在Swiper.js中对幻灯片应用固定位置

假设我有一个使用idangerous swiper.js库创建的简单swiper。下面是我如何使幻灯片保持固定，并在滚动期间将下面的内容移动到幻灯片的顶部？我试着摆弄一下位置：固定的和一些视差库。显然位置：固定css属性不适用于转换的元素

HTML:

JS:

将元素放置在文档布局中后，转换将起作用。 因此，要解决这些问题，您必须设置位置：fixed to the swiper container

---

您可以添加JSFIDLE链接吗？当然可以

<div class="content">
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide" style="background-image: url(https://source.unsplash.com/random?sig=24);">
        </div>
        <div class="swiper-slide" style="background-image: url(https://source.unsplash.com/random?sig=53);"> 
        </div>
        <div class="swiper-slide" style="background-image: url(https://source.unsplash.com/random?sig=52);">
        </div>
    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-pagination"></div>
</div>
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitati.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitati.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitati. Ut enim ad minim veniam, quis nostrud exercitati.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitati.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitati. Ut enim ad minim veniam, quis nostrud exercitati.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitati.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitati. Ut enim ad minim veniam, quis nostrud exercitati.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitati.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitati.</p> 
</div>

.swiper-slide {
    background-size: cover;
    background-position: 50%;
    min-height: 80vh;
}

var Swipes = new Swiper('.swiper-container', {
    loop: true,
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    pagination: {
        el: '.swiper-pagination',
    },
});

.swiper-container{
 position:fixed;
 top:0;
 left:0;
 width:100%;
}