position 固定在猫头鹰转盘内无法工作（固定 position 上一个转盘上的下一个按钮）

Question

我需要将<div class="btn">的 position 固定在屏幕的垂直中间（尤其是在小型设备上）。 不幸的是，owl carousel 中的某些类阻止了这种手动定位。

我尝试将 append div 元素与 jQuery 结合起来：

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

提琴手

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>