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

Question

Подскажите как можно сделать что-бы при горизонтальном скролле желтый блок заезжал за красный(красный фиксирован как-бы), а при вертикальном скролле красный блок двигается вместе с желтым. Спасибо

https://jsfiddle.net/5q8ogntm/13/

(function() {


  let scroll = document.querySelector('.compare__body');

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

  scroll.addEventListener('mousedown', function(e) {
    drag = true;
    coorX = e.pageX - this.offsetLeft;
  });
  document.addEventListener('mouseup', function() {
    drag = false;
    left = scroll.scrollLeft;
  });
  scroll.addEventListener('mousemove', function(e) {
    if (drag) {
      this.scrollLeft = left - (e.pageX - this.offsetLeft - coorX);
    }
  });


})();

.compare__body {
  display: flex;
  flex-wrap: nowrap;
  overflow: auto;
  height: 400px;
}

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

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


.compare__body::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

<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="compare__main-row head-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 class="compare__main-row">Цена</div>
          </div>
          <div class="compare__product">
            <div class="compare__product-row head-row"></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 class="compare__product-row">1002</div>
          </div>
          <div class="compare__product">
            <div class="compare__product-row head-row"></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 class="compare__product-row">1002</div>
          </div>
          <div class="compare__product">
            <div class="compare__product-row head-row"></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 class="compare__product-row">1002</div>
          </div>
          <div class="compare__product">
            <div class="compare__product-row head-row"></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 class="compare__product-row">1002</div>
          </div>
          <div class="compare__product">
            <div class="compare__product-row head-row"></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 class="compare__product-row">1002</div>
          </div>
        </div>
      </div>
    </div>
  </div>

Answer 1

Добавьте еще один обработчик:

scroll.addEventListener('scroll', function(e) {
    headColumn.style.transform = 'translateX(' + this.scrollLeft + 'px)';
});

headColumn - это красный блок.

Более продвинутый вариант (IE не поддерживает):

.compare__main-column {
  position: sticky;
  left: 0;
}

БЛОГ НА HUSL

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

Ответы (1 шт):