Question

说我有一个用危险的Swiper.js库创建的简单的刷卡器。这是codepen link和jsfiddle link的用法，如何使幻灯片保持固定，并且在滚动过程中，下面的内容在幻灯片的顶部移动？我曾尝试弄乱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

将transition放置在文档布局中后，element才能工作。
因此，要解决此问题，必须将position:fixed设置为swiper-container。

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

Simple Example based on your code.

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

1 个答案: