Как зафиксировать блок при вертикальном скролле?

function scrollCompare() {

  let speed = 2; // Скорость скролла.

  let scroll = document.querySelector('.compare__body');
  let scrollMainBlock = document.querySelector('.compare__main-column');

  let left = 0;
  let drag = false;
  let coorX = 0;

  scroll.addEventListener('mousedown', function(e) {
    drag = true;
    coorX = e.pageX;
  });

  document.addEventListener('mouseup', function() {
    drag = false;
    left = scroll.scrollLeft;
    top = scroll.scrollTop;
  });

  scroll.addEventListener('mousemove', function(e) {
    if (drag) {
      this.scrollLeft = left - (e.pageX - coorX) * speed;
    }
  });

  scroll.addEventListener('scroll', function(e) {
    if (window.innerWidth > 768)
      scrollMainBlock.style.transform = 'translateX(' + this.scrollLeft + 'px)';
    else scrollMainBlock.style.transform = '';
  });

  window.addEventListener('resize',
    e => scroll.dispatchEvent(new CustomEvent('scroll'))
  );
};

scrollCompare();

:root {
  --height-of-empty-blocks: 480px;
}

.compare__body {
  display: flex;
  flex-wrap: nowrap;
  overflow: auto;
  height: 940px;
  ms-overflow-style: none;
  scrollbar-width: none;
}

.compare__body::-webkit-scrollbar {
  display: none;
}

.compare__head-row {
  border: 1px solid #000000;
  height: var(--height-of-empty-blocks);
  width: 290px;
  position: fixed;
}

.compare__main-head-row {
  height: 480px;
  width: 290px;
  background: #ffffff;
  padding: 0px 0px 42px 0px;
}

.compare__main-row {
  width: 310px;
  min-height: 80px;
  background: red;
}

.rows-wrapper {
  margin-top: var(--height-of-empty-blocks);
}

.compare__product-row {
  width: 330px;
  min-height: 80px;
  background: yellow;
}

<div class="compare__wrap">
  <div class="compare__block">
    <div class="compare__scroll">
      <div class="compare__content">
        <div class="compare__body">
          <div class="compare__main-column">
            <div class="rows-wrapper">
              <div class="compare__main-row">Цена</div>
              <div class="compare__main-row">Цена</div>
              <div class="compare__main-row">Цена</div>
              <div class="compare__main-row">Цена</div>
              <div class="compare__main-row">Цена</div>
              <div class="compare__main-row">Цена</div>
              <div class="compare__main-row">Цена</div>
              <div class="compare__main-row">Цена</div>
              <div class="compare__main-row">Цена</div>
            </div>
          </div>
          <div class="compare__product">
            <div class="compare__head-row"></div>
            <div class="rows-wrapper">
              <div class="compare__product-row">1002</div>
              <div class="compare__product-row">1002</div>
              <div class="compare__product-row">1002</div>
              <div class="compare__product-row">1002</div>
              <div class="compare__product-row">1002</div>
              <div class="compare__product-row">1002</div>
              <div class="compare__product-row">1002</div>
              <div class="compare__product-row">1002</div>
              <div class="compare__product-row">1002</div>
            </div>
          </div>
          <div class="compare__product">
            <div class="compare__head-row"></div>
            <div class="rows-wrapper">
              <div class="compare__product-row">1002</div>
              <div class="compare__product-row">1002</div>
              <div class="compare__product-row">1002</div>
              <div class="compare__product-row">1002</div>
              <div class="compare__product-row">1002</div>
              <div class="compare__product-row">1002</div>
              <div class="compare__product-row">1002</div>
              <div class="compare__product-row">1002</div>
              <div class="compare__product-row">1002</div>
            </div>
          </div>
          <div class="compare__product">
            <div class="compare__head-row"></div>
            <div class="rows-wrapper">
              <div class="compare__product-row">1002</div>
              <div class="compare__product-row">1002</div>
              <div class="compare__product-row">1002</div>
              <div class="compare__product-row">1002</div>
              <div class="compare__product-row">1002</div>
              <div class="compare__product-row">1002</div>
              <div class="compare__product-row">1002</div>
              <div class="compare__product-row">1002</div>
              <div class="compare__product-row">1002</div>
            </div>
          </div>
          <div class="compare__product">
            <div class="compare__head-row"></div>
            <div class="rows-wrapper">
              <div class="compare__product-row">1002</div>
              <div class="compare__product-row">1002</div>
              <div class="compare__product-row">1002</div>
              <div class="compare__product-row">1002</div>
              <div class="compare__product-row">1002</div>
              <div class="compare__product-row">1002</div>
              <div class="compare__product-row">1002</div>
              <div class="compare__product-row">1002</div>
              <div class="compare__product-row">1002</div>
            </div>
          </div>
          <div class="compare__product">
            <div class="compare__head-row"></div>
            <div class="rows-wrapper">
              <div class="compare__product-row">1002</div>
              <div class="compare__product-row">1002</div>
              <div class="compare__product-row">1002</div>
              <div class="compare__product-row">1002</div>
              <div class="compare__product-row">1002</div>
              <div class="compare__product-row">1002</div>
              <div class="compare__product-row">1002</div>
              <div class="compare__product-row">1002</div>
              <div class="compare__product-row">1002</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>