Фиксированный div после прокрутки: HTML, CSS и JavaScript

.sticky-top {
    position: sticky;
    top: 0;
}

<div class="sticky-top">Этот контент будет зафиксирован в верхней части при прокрутке</div>

const stickyDiv = document.querySelector('.my-div'); // Выбираем необходимый div
const stickyPoint = stickyDiv.offsetTop; // Точка, при достижении которой элемент становится фиксированным

window.addEventListener('scroll', () => {
  if (window.pageYOffset >= stickyPoint) {
    stickyDiv.classList.add('sticky-top'); // Фиксируем элемент, когда прокрутили до нужной точки
  } else {
    stickyDiv.classList.remove('sticky-top'); // Освобождаем его, если скролл находится выше этой точки
  }
});

const stickyDiv = document.querySelector('.my-div');
const stickyPoint = stickyDiv.offsetTop;

const onScroll = () => {
  if (window.pageYOffset >= stickyPoint) {
    stickyDiv.classList.add('sticky-top');
  } else {
    stickyDiv.classList.remove('sticky-top');
  }
};
window.addEventListener('scroll', onScroll); // Функция onScroll будет переключать класс

До прокрутки:
+------------------------+
| Заголовок сайта (🔗 Фиксирован) |
+------------------------+
| Контент                |
|                        |
+------------------------+

+------------------------+
| Заголовок сайта (🔗 Остается вверху) | 👀 Теперь он всегда на виду, словно надежный страж порядка
+------------------------+
| Прокручиваемый контент (📜 Спускающийся вниз)  |
|                        |
+------------------------+

<div class="anchor-div" style="height: 100px;"></div> <!-- "Магия" произойдет здесь -->
<div class="my-div">...</div> <!-- Реальный div с контентом -->

.sticky-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100px;
}

const $stickyDiv = $('.my-div');
const stickyPoint = $stickyDiv.offset().top; // Место "трансформации"

$(window).on('scroll', () => {
  if ($(window).scrollTop() >= stickyPoint) {
    $stickyDiv.addClass('sticky-top'); // Притягиваем div "как волшебной палочкой"
  } else {
    $stickyDiv.removeClass('sticky-top'); // И возвращаем ему обыденность
  }
});

$(document).on('click', 'a[href^="#"]', function(event) {
  event.preventDefault();
  const target = $($(this).attr('href'));
  const offsetTop = target.offset().top – $('.sticky-top').outerHeight();

  $('html, body').animate({
    scrollTop: offsetTop
  }, 0);
});