位置固定在猫头鹰旋转木马内不起作用（旋转木马上的固定位置上一个按钮）

Question

我需要将 <div class="btn"> 的固定位置固定在屏幕的垂直中间（尤其是在小型设备上）。不幸的是，owl carousel 中的某些类阻止了这种手动定位。我尝试使用 jQuery 将 div 元素附加到正文：jQuery('.btn').appendTo("body");它有效，但与其他按钮冲突（在第一页显示所有按钮）。我该如何解决这个问题？代码：$('.owl-carousel').owlCarousel({  items: 1,  autoplay: false,  loop: false,  nav: false,  dots: false,  center: true,  mouseDrag: false,  touchDrag: false,  autoHeight: true,  margin: 10,  smartSpeed: 500,  URLhashListener: true,  autoplayHoverPause: true,  startPosition: 'URLHash'});body {  position: relative;}.owl-carousel {  position: relative;}.page {  height: 10rem;  padding: 1rem;  height: 2000px;}.one {  background: #bec4bd;}.two {  background: green;}.three {  background: #41253c;}.linkA {  position: absolute;  bottom: 10px;  left: 10px;  text-decoration: none;  background: red;  color: #fff;  padding: 5px 15px;  margin-right: 5px;  font-family: sans-serif;  font-size: 14px;}.linkB {  position: absolute;  bottom: 10px;  right: 10px;  text-decoration: none;  background: red;  color: #fff;  padding: 5px 15px;  margin-right: 5px;  font-family: sans-serif;  font-size: 14px;}.btn {  position: fixed;  top: 20%;  left: 10px;  right: 10px;  width: 100%;  z-index: 100;}<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet" /><link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet" /><script src="https://owlcarousel2.github.io/OwlCarousel2/assets/vendors/jquery.min.js"></script><script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script><div class="owl-carousel owl-theme">  <div class="page one" data-hash="page1">    Please see the button position!    <div class="btn">    <a href="#page2" class="linkB">Page 2</a>    </div>    </div>

Answer 1

在轮播中使用scroll position sticky可以解决您的问题

$('.owl-carousel').owlCarousel({

  items: 1,

  autoplay: false,

  loop: false,

  nav: false,

  dots: false,

  center: true,

  mouseDrag: false,

  touchDrag: false,

  autoHeight: true,

  margin: 0,

  smartSpeed: 500,

  URLhashListener: true,

  autoplayHoverPause: true,

  startPosition: 'URLHash'

});

body {

  position: relative;

  margin:0;

}

.owl-carousel {

  position: relative;

}

.page {

  height: 10rem;

  padding: 1rem;

  height: 2000px;

}

.one {

  background: #bec4bd;

}

.two {

  background: green;

}

.three {

  background: #41253c;

}

.linkA {

  position: absolute;

  bottom: 10px;

  left: 10px;

  text-decoration: none;

  background: red;

  color: #fff;

  padding: 5px 15px;

  margin-right: 5px;

  font-family: sans-serif;

  font-size: 14px;

}

.linkB {

  position: absolute;

  bottom: 10px;

  right: 10px;

  text-decoration: none;

  background: red;

  color: #fff;

  padding: 5px 15px;

  margin-right: 5px;

  font-family: sans-serif;

  font-size: 14px;

}

.btn {

 position: sticky;

  top: 50%;

  left: 10px;

  right: 10px;

  width: 100%;

  z-index: 100;

}

.owl-carousel .owl-item {

    overflow-y: scroll;

    height: 100vh;

}

<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet" />

<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet" />

<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/vendors/jquery.min.js"></script>

<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>

<div class="owl-carousel owl-theme">

  <div class="page one" data-hash="page1">

    Please see the button position!

    <div class="btn">

    <a href="#page2" class="linkB">Page 2</a>

    </div>  

  </div>

  <div class="page two" data-hash="page2">

    Please see the button position!

    <div class="btn">

    <a href="#page1" class="linkA">Page 1</a>

    <a href="#page3" class="linkB">Page 3</a>

    </div>  

  </div>

  <div class="page three" data-hash="page3" style="color:#fff;">

    Please see the button position!

    <div class="btn">

    <a href="#page2" class="linkA">Page 2</a>

    </div> 

  </div>

</div>