可滚动 div 带有堆叠粘性组 headers

Question

我正在尝试构建一个长的可滚动的分组项目列表。组标题应始终可见（堆叠）。如果您单击组header，您应该滚动到响应的项目。

使用粘性位置，我设法让组header留在视野中。（使用 sticky 可能与 IE 有一些兼容性问题）。

然后我将点击事件设置为滚动到粘性 header 但这并没有起到作用，因为它并没有很好地定位它。我已将其设置为组项，但它们落后于粘性 headers.

为了澄清我的问题，我做了一个直观的例子：

我已经用我目前得到的东西创建了一个 jsfiddle：https://jsfiddle.net/n6urjabk/1/

<style type="text/css">
  body,
  html {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
  }
  
  body {
    background: #20262E;
    padding: 20px;
    box-sizing: border-box;
    font-family: Helvetica;
  }
  
  #container {
    /*display:flex;*/
    max-height: 100%;
    height: 400px;
  }
  
  .column {
    background: #eee;
    box-sizing: border-box;
    overflow: auto;
    position: relative;
    max-height: 400px;
  }
  
  .row {
    background: #eee;
    border-radius: 0px;
    margin: 0;
    padding: 10px;
  }
  
  .row:nth-child(odd) {
    background: #fff;
  }
  
  .column h4 {
    background: lightblue;
    padding: 10px;
    margin: 0;
    position: sticky;
    height: 40px;
    box-sizing: border-box;
    text-align: center;
  }
  
  .column h4:hover {
    opacity: 0.8;
    cursor: pointer;
  }
  
  .column h4:nth-of-type(odd) {
    background: lightgreen;
  }
</style>


<div id="container">
  <div class="column">
    <h4 class="header1" id="test1">
      Head 1
    </h4>
    <div class="content">
      <div class="row">row 1.1</div>
      <div class="row">row 1.2</div>
      <div class="row">row 1.3</div>
      <div class="row">row 1.4</div>
      <div class="row">row 1.5</div>
      <div class="row">row 1.6</div>
      <div class="row">row 1.7</div>
      <div class="row">row 1.8</div>
    </div>
    <h4 class="header2" id="test2">
      Head 2
    </h4>
    <div class="content">
      <div class="row">row 2.1</div>
      <div class="row">row 2.2</div>
      <div class="row">row 2.3</div>
      <div class="row">row 2.4</div>
      <div class="row">row 2.5</div>
      <div class="row">row 2.6</div>
      <div class="row">row 2.7</div>
      <div class="row">row 2.8</div>
    </div>
    <h4 class="header3" id="test3">
      Head 3
    </h4>
    <div class="content">
      <div class="row">row 3.1</div>
      <div class="row">row 3.2</div>
      <div class="row">row 3.3</div>
      <div class="row">row 3.4</div>
      <div class="row">row 3.5</div>
      <div class="row">row 3.6</div>
      <div class="row">row 3.7</div>
      <div class="row">row 3.8</div>
    </div>
    <h4 class="header4" id="test4">
      Head 4
    </h4>
    <div class="content">
      <div class="row">row 4.1</div>
      <div class="row">row 4.2</div>
      <div class="row">row 4.3</div>
      <div class="row">row 4.4</div>
      <div class="row">row 4.5</div>
      <div class="row">row 4.6</div>
      <div class="row">row 4.7</div>
      <div class="row">row 4.8</div>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
  var headers = $('h4').length;
  var headerHeight = 40;
  var maxOffset = (headers * headerHeight) - headerHeight;

  $('h4').each(function() {
    var index = $(this).index('h4');
    var top = index * headerHeight;
    var bottom = maxOffset - top;
    $(this).css('top', top).css('bottom', bottom);
  });

  $('h4').on('click', function() {

    $(this).next()[0].scrollIntoView({
      block: 'start',
      behavior: 'smooth'
    });
  });
</script>

Answer 1

您需要像对顶部所做的那样偏移滚动参数。我在 jQuery 方面不太擅长，所以我在 JS 中编写了一个有效的函数。但是你可以理解它的要点并自己写一个。

点击事件函数：

document.addEventListener("click", (e) => {
  if (e.target.nodeName == "H4") {
    const index = parseInt(e.target.id.split("").pop());
    const scrollNum = e.target.nextElementSibling.offsetTop - (index * 40);
    document.querySelector(".column").scrollTo({
      top: scrollNum,
      behavior: 'smooth'
    });
  }
});

可滚动 div 带有堆叠粘性组 headers

Scrollable div with stacked sticky group headers

javascript

css

sticky