将Bootstrap 4卡Z索引减少到小于表thead

Question

我有一个带有固定标题的表，如下所示。 问题在于卡元素在固定标题的顶部滚动。 我曾尝试提高z-index的thead和减少z-index卡元件的。 似乎没有任何作用。

 document.getElementById("scrollarea").addEventListener("scroll", function() { var translate = "translate(0," + this.scrollTop + "px)"; $(this).find("thead")[0].style.transform = translate; }); 

 #scrollarea { max-height: 200px; overflow: auto; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script> <div id="scrollarea"> <table class="table table-striped"> <thead> <tr> <th>Row 1</th> <th>Row 2</th> <th>Row 3</th> </tr> </thead> <tbody> <tr> <td colspan="3"> <div class="card"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </td> </tr> <tr> <td colspan="3"> <div class="card"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </td> </tr> <tr> <td colspan="3"> <div class="card"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </td> </tr> <tr> <td colspan="3"> <div class="card"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </td> </tr> <tr> <td colspan="3"> <div class="card"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </td> </tr> <tr> <td colspan="3"> <div class="card"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </td> </tr> <tr> <td colspan="3"> <div class="card"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </td> </tr> </tbody> </table> </div> 

当div滚动时，我想使thead在顶部。

任何帮助都将不胜感激。 谢谢。

Answer 1

您应该在滚动上更改position属性，并使用z-index：

 // When the user scrolls the page, execute myFunction window.onscroll = function() {myFunction()}; // Get the navbar var navbar = document.getElementById("navbar"); // Get the offset position of the navbar var sticky = navbar.offsetTop; // Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position function myFunction() { if (window.pageYOffset >= sticky) { navbar.classList.add("sticky") } else { navbar.classList.remove("sticky"); } } 

 /* Style the navbar */ #navbar { overflow: hidden; } /* The sticky class is added to the navbar with JS when it reaches its scroll position */ .sticky { position: fixed; top: 0; width: 100%; z-index: 1; background: #FFF; } /* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */ .sticky + .tbody { padding-top: 60px; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script> <div id="scrollarea"> <table class="table table-striped"> <thead id="navbar"> <tr> <th>Row 1</th> <th>Row 2</th> <th>Row 3</th> </tr> </thead> <tbody> <tr> <td colspan="3"> <div class="card"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </td> </tr> <tr> <td colspan="3"> <div class="card"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </td> </tr> <tr> <td colspan="3"> <div class="card"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </td> </tr> <tr> <td colspan="3"> <div class="card"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </td> </tr> <tr> <td colspan="3"> <div class="card"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </td> </tr> <tr> <td colspan="3"> <div class="card"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </td> </tr> <tr> <td colspan="3"> <div class="card"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </td> </tr> </tbody> </table> </div> 

Answer 2

尝试将表更改为div并将.sticky-top添加到父div。