в коде html ниже блок month-header к сожалению не плывет вслед за прокруткой дня до конца месяца, он виден прикрепленным к первому дню месяца, и скрывается вместе с ним
как сделать чтобы всегда виден для каждого месяца?


<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Календарь с выбором месяца и бесконечной прокруткой</title>
<style>
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
  * {
    box-sizing: border-box;
  }
  body {
    margin: 20px;
    font-family: 'Inter', sans-serif;
    background: #fff;
    color: #111;
  }
  h1 {
    font-weight: 700;
    font-size: 52px;
    line-height: 52px;
    letter-spacing: -1.56px;
    margin: 0;
  }
  .calendar {
    display: flex;
    justify-content: space-between;
    margin-bottom: 36px;
  }
  .calendar-container {
    max-width: 100%;
  }
  .calendar-header {
    display: flex;
    justify-content: right;
    align-items: center;
    margin-bottom: 12px;
    font-size: 0.875rem;
    color: #999;
    user-select: none;
    min-height: 24px;
  }
  .month-select {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    padding: 6px 12px;
    border-radius: 12px;
    border: 1px solid #ccc;
    background: #fff;
    cursor: pointer;
    user-select: none;
    min-width: 140px;
  }
  .calendar-scroll-wrapper {
    display: flex;
    align-items: center;
    position: relative;
  }
  .circle-button {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    background: #ffce00;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
    margin: 0 8px;
    box-shadow: 0 0 6px rgb(255 206 0 / 0.5);
    transition: background-color 0.3s, filter 0.3s;
    z-index: 2;
  }
  .circle-button:active:not(.disabled) {
    background-color: #e6b800;
  }
  .circle-button.disabled {
    background: #ccc;
    cursor: default;
    box-shadow: none;
    filter: grayscale(1);
  }
  .calendar-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    flex: 1 1 auto;
    -ms-overflow-style: none;  /* IE and Edge */
    touch-action: pan-x;
  }
  .calendar-scroll::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
  }
  .calendar-days {
    display: flex;
    user-select: none;
    padding-bottom: 8px;
  }
  .month-block {
    display: flex;
    gap: 0;
    margin-left: 28px;
  }
  .month-block:first-child {
    margin-left: 0;
  }
  .day-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
    width: 56px;
    min-width: 56px;
    justify-content: flex-start;
  }
  .month-header {
    font-size: 0.75rem;
    color: #999;
    user-select: none;
    white-space: nowrap;
    text-align: left;
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 3;
  }
  .day {
    width: 56px;
    padding: 8px 0 12px;
    border-radius: 0;
    text-align: center;
    cursor: pointer;
    position: relative;
    transition: background-color 0.3s, color 0.3s;
    color: #111;
  }
  .day.disabled {
    color: #bbb;
    cursor: default;
  }
  .day .date {
    font-weight: 700;
    font-size: 1.3rem;
    line-height: 1;
    margin-bottom: 4px;
    letter-spacing: -.04em;
  }
  .day .weekday {
    font-size: 0.75rem;
    line-height: 1;
    color: #666;
    text-transform: uppercase;
  }
  .day.saturday .weekday, .day.sunday .weekday {
    color: #e04f4f;
  }
  .day.saturday {
    color: #2a2a2a;
  }

  /* Выделение интервала */
  .day.selected-start,
  .day.selected-end {
    background-color: #ffce00;
    color: #111;
    border-radius: 12px;
  }
  .day.selected-start {
    border-radius: 12px 0 0 12px;
  }
  .day.selected-end {
    border-radius: 0 12px 12px 0;
  }
  .day.in-range {
    background-color: #faefdc;
    color: #111;
    border-radius: 0;
  }
  .calendar-scroll-wrapper:after,.calendar-scroll-wrapper:before {
    position: absolute;
    top: 0px;
    right: 52px;
    bottom: 0;
    z-index: 1;
    width: 100px;
    background: linear-gradient(270deg,#fff .67%,rgba(239,243,245,0) 99.99%,hsla(0,0%,100%,0));
    opacity: 1;
    transition: .2s ease-out;
    content: "";
    pointer-events: none
  }
  .calendar-scroll-wrapper:before {
    left: 52px;
    right: auto;
    width: 75px;
    transform: rotate(180deg);
  }
  
  .calendar-start .calendar-scroll-wrapper:before {
    opacity: 0;
  }

  @media (hover: hover) {
    .day:hover:not(.selected-start):not(.selected-end):not(.in-range):not(.disabled) {
      background-color: #f0f4f5;
    }
    .day.in-range:hover {
      background-color: #fff5cc;
    }
    .day.selected-start:hover, .day.selected-end:hover {
      background-color: #dbab00;
    }
    
  }
  
  @media (max-width: 767px) {
    h1 {
      font-size: 28px;
      line-height: 28px;
      letter-spacing: -.84px;
    }
    .calendar {
      flex-direction: column;
      gap: 20px;
      align-items: flex-start;
    }
    .circle-button {
      display: none;
    }
    .calendar-scroll-wrapper:after {
      right: 0;
    }
    .calendar-scroll-wrapper:before {
      left: 0;
    }
  }
</style>
</head>
<body>
  <div class="calendar">
    <h1>События</h1>
    <div class="calendar-header">
      <select class="month-select" aria-label="Выбор месяца и года"></select>
    </div>
  </div>
  <div class="calendar-container calendar-start" aria-label="Календарь с выбором интервала">
    <div class="calendar-scroll-wrapper">
      <div class="circle-button circle-left" role="button" aria-label="Прокрутить влево" tabindex="0"></div>
      <div class="calendar-scroll" tabindex="0" aria-live="polite" aria-atomic="true" aria-relevant="additions removals">
        <div class="calendar-days" role="list"></div>
      </div>
      <div class="circle-button circle-right" role="button" aria-label="Прокрутить вправо" tabindex="0"></div>
    </div>
  </div>

<script>
(() => {
  const months = [
    'Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь',
    'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'
  ];
  const weekdays = ['ВС', 'ПН', 'ВТ', 'СР', 'ЧТ', 'ПТ', 'СБ'];

  const calendarContainer = document.querySelector('.calendar-container');
  const calendarDays = document.querySelector('.calendar-days');
  const scrollContainer = document.querySelector('.calendar-scroll');
  const btnLeft = document.querySelector('.circle-left');
  const btnRight = document.querySelector('.circle-right');
  const monthSelect = document.querySelector('.month-select');

  const dayWidth = 56; // ширина дня без gap
  const monthSectionGap = 28; // gap между секциями месяцев (из CSS .calendar-days gap)

  const today = new Date();
  today.setHours(0,0,0,0);

  let days = [];
  let selectionStart = null;
  let selectionEnd = null;
  let monthStartIndices = [];

  const INITIAL_DAYS_COUNT = 365;
  function addDays(count) {
    for(let i=0; i<count; i++) {
      const lastDate = days.length ? days[days.length - 1] : today;
      const nextDate = new Date(lastDate);
      nextDate.setDate(nextDate.getDate() + 1);
      days.push(nextDate);
    }
  }

  function isSameDate(d1, d2) {
    return d1.getFullYear() === d2.getFullYear() &&
           d1.getMonth() === d2.getMonth() &&
           d1.getDate() === d2.getDate();
  }

  function renderDays() {
    calendarDays.innerHTML = '';
    monthStartIndices = [];

    let prevMonth = null;
    let currentMonthSection = null; // Новый контейнер для месяца (заголовок + дни)
    let currentMonthBlock = null;   // Блок с днями (как раньше .month-block)

    days.forEach((date, i) => {
      const month = date.getMonth();
      const year = date.getFullYear();

      if (prevMonth !== month || i === 0) {
        // Создаем контейнер для секции месяца
        currentMonthSection = document.createElement('div');
        currentMonthSection.className = 'month-section';

        // Создаем заголовок месяца и добавляем его в секцию
        const monthHeader = document.createElement('div');
        monthHeader.className = 'month-header';
        monthHeader.textContent = `${months[month]} ${year}`;
        currentMonthSection.appendChild(monthHeader);

        // Создаем блок для дней этого месяца
        currentMonthBlock = document.createElement('div');
        currentMonthBlock.className = 'month-block';
        currentMonthSection.appendChild(currentMonthBlock); // Добавляем блок дней в секцию

        calendarDays.appendChild(currentMonthSection); // Добавляем секцию месяца в общий контейнер

        monthStartIndices.push({year, month, index: i, element: currentMonthSection}); // element теперь currentMonthSection
        prevMonth = month;
      }

      const wrapper = document.createElement('div');
      wrapper.className = 'day-wrapper';

      // Удалена логика с пустым спейсером, т.к. заголовок теперь снаружи day-wrapper

      const dayEl = document.createElement('div');
      dayEl.classList.add('day');

      const dayOfWeek = date.getDay();
      if (dayOfWeek === 0) dayEl.classList.add('sunday');
      if (dayOfWeek === 6) dayEl.classList.add('saturday');

      const dateEl = document.createElement('div');
      dateEl.className = 'date';
      dateEl.textContent = String(date.getDate()).padStart(2, '0');

      const weekdayEl = document.createElement('div');
      weekdayEl.className = 'weekday';
      weekdayEl.textContent = weekdays[dayOfWeek];

      dayEl.appendChild(dateEl);
      dayEl.appendChild(weekdayEl);

      if (date < today) {
        dayEl.classList.add('disabled');
      }

      if (selectionStart && selectionEnd) {
        if (isSameDate(date, selectionStart)) {
          dayEl.classList.add('selected-start');
        } else if (isSameDate(date, selectionEnd)) {
          dayEl.classList.add('selected-end');
        } else if (date > selectionStart && date < selectionEnd) {
          dayEl.classList.add('in-range');
        }
      } else if (selectionStart && isSameDate(date, selectionStart)) {
        dayEl.classList.add('selected-start');
      }

      dayEl.addEventListener('click', () => {
        if (date < today) return;
        if (!selectionStart) {
          selectionStart = date;
          selectionEnd = null;
        } else if (!selectionEnd) {
          if (date < selectionStart) {
            selectionEnd = selectionStart;
            selectionStart = date;
          } else if (date > selectionStart) {
            selectionEnd = date;
          } else {
            selectionStart = date;
            selectionEnd = null;
          }
        } else {
          selectionStart = date;
          selectionEnd = null;
        }
        renderDays(); // Перерисовываем для обновления выделения
      });

      wrapper.appendChild(dayEl);
      currentMonthBlock.appendChild(wrapper); // Добавляем обертку дня в текущий блок дней
    });

    updateLeftButtonState();
  }

  function updateLeftButtonState() {
    if (scrollContainer.scrollLeft <= 0) {
      btnLeft.classList.add('disabled');
      btnLeft.setAttribute('aria-disabled', 'true');
      btnLeft.tabIndex = -1;
      calendarContainer.classList.add('calendar-start');
    } else {
      btnLeft.classList.remove('disabled');
      btnLeft.removeAttribute('aria-disabled');
      btnLeft.tabIndex = 0;
      calendarContainer.classList.remove('calendar-start');
    }
  }

  function onScroll() {
    // updateMonthDisplay(); // Эта функция не была полностью реализована, пока оставляем
    updateLeftButtonState();
  }

  function scrollToDate(dateToScroll) {
    const targetMonth = dateToScroll.getMonth();
    const targetYear = dateToScroll.getFullYear();

    const monthInfo = monthStartIndices.find(m => m.month === targetMonth && m.year === targetYear);
    if (!monthInfo) return;

    // Рассчитываем позицию прокрутки
    // Каждый month-section имеет ширину (кол-во дней * dayWidth) + monthSectionGap (если не первый)
    let scrollPos = 0;
    for (let i = 0; i < monthStartIndices.length; i++) {
        const currentMonthData = monthStartIndices[i];
        if (currentMonthData.month === targetMonth && currentMonthData.year === targetYear) {
            // Найден целевой месяц. Если это не первый месяц, добавляем отступ слева
            // Прокрутка будет к началу этого month-section
            //if (i > 0) { // Для всех кроме первого месяца, учитываем его собственный gap слева
                 // scrollPos -= monthSectionGap; // Уменьшаем на gap, т.к. element.offsetLeft уже включает его
            //}
            scrollPos = currentMonthData.element.offsetLeft - dayWidth;

            // Если это текущий месяц, прокрутим к сегодняшнему дню, иначе к началу месяца
            if (targetYear === today.getFullYear() && targetMonth === today.getMonth()) {
                const todayIndexInMonth = days.findIndex(d => isSameDate(d, today)) - currentMonthData.index;
                if (todayIndexInMonth >= 0) {
                     scrollPos += todayIndexInMonth * dayWidth;
                }
            }
            break;
        }
    }
    scrollContainer.scrollTo({left: scrollPos, behavior: 'smooth'});
  }


  function fillMonthSelect() {
    monthSelect.innerHTML = '';
    const startYear = today.getFullYear();
    const startMonth = today.getMonth();
    for(let i=0; i<12; i++) {
      let y = startYear;
      let m = startMonth + i;
      if (m > 11) {
        m -= 12;
        y++;
      }
      const option = document.createElement('option');
      option.value = `${y}-${m}`;
      option.textContent = `${months[m]} ${y}`;
      monthSelect.appendChild(option);
    }
    monthSelect.value = `${today.getFullYear()}-${today.getMonth()}`;
  }

  monthSelect.addEventListener('change', () => {
    const [y, m] = monthSelect.value.split('-').map(Number);
    scrollToDate(new Date(y, m, 1));
  });

  btnLeft.addEventListener('click', () => {
    if (btnLeft.classList.contains('disabled')) return;
    scrollContainer.scrollBy({ left: -200, behavior: 'smooth' });
  });
  btnRight.addEventListener('click', () => {
    scrollContainer.scrollBy({ left: 200, behavior: 'smooth' });
  });

  btnLeft.addEventListener('keydown', e => {
    if ((e.key === 'Enter' || e.key === ' ') && !btnLeft.classList.contains('disabled')) {
      e.preventDefault();
      btnLeft.click();
    }
  });
  btnRight.addEventListener('keydown', e => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      btnRight.click();
    }
  });

  let scrollTimeout;
  scrollContainer.addEventListener('scroll', () => {
    if (scrollTimeout) clearTimeout(scrollTimeout);
    scrollTimeout = setTimeout(onScroll, 100); // Используем переменную scrollTimeout
    updateLeftButtonState();
  });

  days.push(new Date(today));
  addDays(INITIAL_DAYS_COUNT - 1);
  renderDays();
  fillMonthSelect();

  setTimeout(() => {
    scrollContainer.scrollLeft = 0;
    updateLeftButtonState();
  }, 0);
})();
</script>
</body>
</html>