如何使上一个和下一个按钮具有粘性？

Question

I found the slide tutorial in w3school slideshow , but if I replace the image with a large amount of text content the prev and next arrow could only be seen if I scrolled down to the bottom of the page.我在w3school 幻灯片中找到了幻灯片教程，但是如果我用大量文本内容替换图像，则只有向下滚动到页面底部才能看到上一个和下一个箭头。 So I'm thinking if I can make the buttons sticky.所以我在想是否可以让按钮变得粘稠。 So I found the sticky function .所以我找到了粘性功能。 Below section is my testing code which combined slide with sticky.下面部分是我的测试代码，它结合了幻灯片和粘性。 Please help me to find how to solve this problem.请帮我找到如何解决这个问题。 Thanks!谢谢！

 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * {box-sizing: border-box} body {font-family: Verdana, sans-serif; margin:0} .mySlides {display: none} img {vertical-align: middle;} /* Slideshow container */ .slideshow-container { max-width: 400px; position: relative; margin: auto; } /* Next & previous buttons */ .prev, .next { cursor: pointer; position: -webkit-sticky; position: sticky; top: 0; width: auto; padding: 5px; color: green; font-weight: bold; font-size: 58px;/* size buttons */ transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; } /* Position the "next button" to the right */ .next { right: 0; border-radius: 3px 0 0 3px; } /* On hover, add a black background color with a little bit see-through */ .prev:hover, .next:hover { background-color: rgba(0,0,0,0.8); } /* Caption text */ .text { color: black; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; } /* Number text (1/3 etc) */ .numbertext { color: black; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } /* The dots/bullets/indicators */ .dot { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .active, .dot:hover { background-color: #717171; } /* Fading animation */ .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from {opacity: .4} to {opacity: 1} } @keyframes fade { from {opacity: .4} to {opacity: 1} } /* On smaller screens, decrease text size */ @media only screen and (max-width: 400px) { .prev, .next,.text {font-size: 11px} } </style> </head> <body> <div class="slideshow-container"> <div class="mySlides fade"> <div class="numbertext">1 / 2</div> <br> <br> <div style="padding-bottom:2000px"> <p>In this example, the sticky element sticks to the top of the page (top: 0), when you reach its scroll position.</p> <p>Scroll back up to remove the stickyness.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> </div> <div class="text">L1 News</div> </div> <div class="mySlides fade"> <div class="numbertext">2 / 2</div> <table> <br> <td> 2 </td> </br> </table> <div class="text">L2 news</div> </div> <a class="prev" onclick="plusSlides(-1)">&#10094;</a> <a class="next" onclick="plusSlides(1)">&#10095;</a> </div> <br> <div style="text-align:center"> <span class="dot" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> </div> <script> var slideIndex = 1; showSlides(slideIndex); function plusSlides(n) { showSlides(slideIndex += n); } function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; } </script> </body> </html>

Answer 1

I think you probably misunderstood position: sticky and position:fixed .我想你可能误解了position: sticky和position:fixed 。

Here is a good post explaining the difference.这是一篇解释差异的好帖子。

 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * {box-sizing: border-box} body {font-family: Verdana, sans-serif; margin:0} .mySlides {display: none} img {vertical-align: middle;} /* Slideshow container */ .slideshow-container { max-width: 400px; position: relative; margin: auto; } /* Next & previous buttons */ .prev, .next { cursor: pointer; position: -webkit-sticky; position: fixed; bottom: 0; width: auto; padding: 5px; color: green; font-weight: bold; font-size: 58px;/* size buttons */ transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; } /* Position the "next button" to the right */ .next { right: 0; border-radius: 3px 0 0 3px; } /* On hover, add a black background color with a little bit see-through */ .prev:hover, .next:hover { background-color: rgba(0,0,0,0.8); } /* Caption text */ .text { color: black; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; } /* Number text (1/3 etc) */ .numbertext { color: black; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } /* The dots/bullets/indicators */ .dot { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .active, .dot:hover { background-color: #717171; } /* Fading animation */ .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from {opacity: .4} to {opacity: 1} } @keyframes fade { from {opacity: .4} to {opacity: 1} } /* On smaller screens, decrease text size */ @media only screen and (max-width: 400px) { .prev, .next,.text {font-size: 11px} } </style> </head> <body> <div class="slideshow-container"> <div class="mySlides fade"> <div class="numbertext">1 / 2</div> <br> <br> <div style="padding-bottom:2000px"> <p>In this example, the sticky element sticks to the top of the page (top: 0), when you reach its scroll position.</p> <p>Scroll back up to remove the stickyness.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> </div> <div class="text">L1 News</div> </div> <div class="mySlides fade"> <div class="numbertext">2 / 2</div> <table> <br> <td> 2 </td> </br> </table> <div class="text">L2 news</div> </div> <a class="prev" onclick="plusSlides(-1)">&#10094;</a> <a class="next" onclick="plusSlides(1)">&#10095;</a> </div> <br> <div style="text-align:center"> <span class="dot" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> </div> <script> var slideIndex = 1; showSlides(slideIndex); function plusSlides(n) { showSlides(slideIndex += n); } function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; } </script> </body> </html>

Answer 2

Here's how you can do it.这是您如何做到的。

Remove the padding of 2000px , and as you are not using img tag anymore, just replace the css accordingly.删除2000px的填充，因为您不再使用img标签，只需相应地替换 css。

Also, remember <br> does not end with a </br> .另外，请记住<br>不以</br> 。 It's called as an empty tag.它被称为空标签。

jsFiddle js小提琴

如何使上一个和下一个按钮具有粘性？

问题描述

2 个解决方案

解决方案1
1 已采纳 2019-02-25 05:45:50

解决方案2
0 2019-02-25 05:43:03

如何使上一个和下一个按钮具有粘性？

问题描述

2 个解决方案

解决方案1 1 已采纳 2019-02-25 05:45:50

解决方案2 0 2019-02-25 05:43:03

解决方案1
1 已采纳 2019-02-25 05:45:50

解决方案2
0 2019-02-25 05:43:03