Прокручиваемый div со сложенными липкими заголовками группы

Question

Я пытаюсь создать длинный прокручиваемый список сгруппированных элементов. Заголовки группы всегда должны быть видны (сложены). Если вы щелкнете заголовок группы, вы должны перейти к отвечающим пунктам.

С помощью фиксированного положения мне удалось заставить заголовки группы оставаться на виду. (Использование sticky может иметь некоторые проблемы с совместимостью с IE).

Затем я установил событие click для прокрутки к закрепленному заголовку, но это не сработало, поскольку на самом деле это не очень удобно. Я установил его на групповые элементы, но они скрываются за липкими заголовками.

Чтобы прояснить мой вопрос, я сделал наглядный пример:

i я создал 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'
    });
  }
});