溢出：自动无法按预期使用位置：粘性答案

【问题标题】：overflow:auto doesn't work as expected with position:sticky溢出：自动无法按预期使用位置：粘性
【发布时间】：2022-03-30 20:42:01
【问题描述】：

我有一个引导类为“table-responsive”的引导表，因此当表格对于屏幕来说太宽时，会将 overflow-x 设置为 auto。

我还将第 th 个元素设置为“sticky-top”的引导类，它将表格的位置设置为粘性

从问题Why does overflow:hidden prevent position:sticky from working? 的答案中可以看出，这是因为当粘性元素的父元素设置为溢出时，它成为元素的滚动容器而不是窗口

现在我已经将表响应设置为仅在媒体查询需要时才溢出：

.table-responsive{
   overflow-x:inherit;
}

@media (max-width:432px){
   .table-responsive{
      overflow-x:auto;
   }

现在的问题是表格标题不会粘在移动屏幕上

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

为了解决这个问题，我结合了Rik Schennink 和Dannie Vinther's approach 的脚本。在我的例子中，我创建了一个名为“responsive-header”的表头副本这个“响应式标题”默认设置为display:none 当原始标题滚动到视野之外时，这个响应式标题就会变得可见

这是我所拥有的简化版本 HTML

<html>

  <body>
    <main>
      <section>
        <table id="respond" class='table table-responsive sticky-top responsive-header'>
          <thead class="thead-dark">
            <tr>
              <th class="sticky-top">sticky</th>
              <th class="sticky-top">sticky</th>
              <th class="sticky-top">sticky</th>
              <th class="sticky-top">sticky</th>
              <th class="sticky-top">sticky</th>
              <th class="sticky-top">sticky</th>
            </tr>
          </thead>
        </table>
        <table class='table table-responsive'>


          <thead class="thead-dark">
            <tr>
              <th class="sticky-top">sticky</th>
              <th class="sticky-top">sticky</th>
              <th class="sticky-top">sticky</th>
              <th class="sticky-top">sticky</th>
              <th class="sticky-top">sticky</th>
              <th class="sticky-top">sticky</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
            </tr>
            <tr>
              <td>test</td>
            </tr>
          </tbody>
        </table>
      </section>
    </main>
  </body>

</html>

CSS

.table {
  width: 100%;
  margin-bottom: 1rem;
  color: #212529;
}

.table .thead-dark th {
  color: #fff;
  background-color: #343a40;
  border-color: #454d55;
}

.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
}

.sticky-top {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1020;
}

.responsive-header {
  display: none;
}

和 jQuery

function debounce(func, wait, immediate) {

  var timeout;

  return function() {

    var context = this,
      args = arguments;

    var later = function() {
      timeout = null;

      if (!immediate) func.apply(context, args);

    };

    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);

    if (callNow) func.apply(context, args);

  };

}

const storeScroll = () => {
  document.documentElement.dataset.scroll = window.scrollY;
  if (window.scrollY >= 10) $('#respond').removeClass('responsive-header');
  else $('#respond').addClass('responsive-header');
}
document.addEventListener('scroll', debounce(storeScroll), {
  passive: true
});
// Update scroll position for first time                                                                                                                                                    @
storeScroll();

还有 jsfiddle:https://jsfiddle.net/uf468ocy/

【讨论】：