如何在Swiper.js中的幻燈片上應用固定位置

Question

說我有一個用危險的Swiper.js庫創建的簡單的刷卡器。 這是codepen鏈接和jsfiddle鏈接，該如何使幻燈片保持固定，並且在滾動過程中，下面的內容在幻燈片的頂部移動？ 我曾嘗試弄亂position：fixed和一些Parallax庫。 顯然position：fixed css屬性不適用於轉換后的元素。

HTML：

<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>

CSS：

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

JS：

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

Answer 1

在將element放置在文檔布局中之后， transition才能起作用。
因此，要解決此問題，您必須將position:fixed設置為swiper-container 。

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

根據您的代碼的簡單示例。