Scrollable div with stacked sticky group headers

Question

I'm trying to build a long scrollable list of grouped items. The group titles should always be visible (stacked). If you click the groupheader you should scroll to the responding items.

Using position sticky i managed to make the groupheaders stay in view. (Using sticky may have some compatibility issues with IE).

I then set click event to scroll to the sticky header but that didnt do the trick as it doesn't really position it nicely. I've set it to the groupitems but they get behind the sticky headers.

To clearify my question i've made a visual example:

i've created a jsfiddle with what i got so far: 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

you need to offset the scroll parameter as you did for the top. I'm not so good in jQuery so I have written a function in JS that works. but you can understand to gist of it and write one yourself.

click event function:

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'
    });
  }
});