Question

我有一个带有固定标题的表，如下所示。问题在于卡元素在固定标题的顶部滚动。我尝试过增加z-index中的thead和减少card元素中的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>

滚动thead时，我想将div放在顶部。

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

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。

将Bootstrap 4卡的Z-index降低到小于表thead

2 个答案: