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

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({&nbsp; items: 1,&nbsp; autoplay: false,&nbsp; loop: false,&nbsp; nav: false,&nbsp; dots: false,&nbsp; center: true,&nbsp; mouseDrag: false,&nbsp; touchDrag: false,&nbsp; autoHeight: true,&nbsp; margin: 0,&nbsp; smartSpeed: 500,&nbsp; URLhashListener: true,&nbsp; autoplayHoverPause: true,&nbsp; startPosition: 'URLHash'});body {&nbsp; position: relative;&nbsp; margin:0;}.owl-carousel {&nbsp; position: relative;}.page {&nbsp; height: 10rem;&nbsp; padding: 1rem;&nbsp; height: 2000px;}.one {&nbsp; background: #bec4bd;}.two {&nbsp; background: green;}.three {&nbsp; background: #41253c;}.linkA {&nbsp; position: absolute;&nbsp; bottom: 10px;&nbsp; left: 10px;&nbsp; text-decoration: none;&nbsp; background: red;&nbsp; color: #fff;&nbsp; padding: 5px 15px;&nbsp; margin-right: 5px;&nbsp; font-family: sans-serif;&nbsp; font-size: 14px;}.linkB {&nbsp; position: absolute;&nbsp; bottom: 10px;&nbsp; right: 10px;&nbsp; text-decoration: none;&nbsp; background: red;&nbsp; color: #fff;&nbsp; padding: 5px 15px;&nbsp; margin-right: 5px;&nbsp; font-family: sans-serif;&nbsp; font-size: 14px;}.btn {&nbsp;position: sticky;&nbsp; top: 50%;&nbsp; left: 10px;&nbsp; right: 10px;&nbsp; width: 100%;&nbsp; z-index: 100;}.owl-carousel .owl-item {&nbsp; &nbsp; overflow-y: scroll;&nbsp; &nbsp; 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">&nbsp; <div class="page one" data-hash="page1">&nbsp; &nbsp; Please see the button position!&nbsp; &nbsp; <div class="btn">&nbsp; &nbsp; <a href="#page2" class="linkB">Page 2</a>&nbsp; &nbsp; </div>&nbsp;&nbsp;&nbsp; </div>&nbsp; <div class="page two" data-hash="page2">&nbsp; &nbsp; Please see the button position!&nbsp; &nbsp; <div class="btn">&nbsp; &nbsp; <a href="#page1" class="linkA">Page 1</a>&nbsp; &nbsp; <a href="#page3" class="linkB">Page 3</a>&nbsp; &nbsp; </div>&nbsp;&nbsp;&nbsp; </div>&nbsp; <div class="page three" data-hash="page3" style="color:#fff;">&nbsp; &nbsp; Please see the button position!&nbsp; &nbsp; <div class="btn">&nbsp; &nbsp; <a href="#page2" class="linkA">Page 2</a>&nbsp; &nbsp; </div>&nbsp;&nbsp; </div></div>