JS как отследить скролл сверху у элемента?

Добавь элементу margin.

Чтобы отслеживать положение прокрутки относительно верха элемента и добавлять несколько дополнительных пикселей сверху, можно использовать комбинацию метода JavaScript getBoundingClientRect() и свойства window.scrollY.

Сначала создадим функцию, которая вычисляет расстояние от верха элемента до верха области просмотра:

 function getElementTopPosition(element) { 
  const rect = element.getBoundingClientRect(); 
  return rect.top + window.scrollY; 
} 

Теперь давайте создадим функцию, которая прокручивает до элемента с дополнительным смещением:

 function scrollToElementWithOffset(element, offset = 0) { 
  const elementTop = getElementTopPosition(element); 
  const targetScrollPosition = elementTop - offset; 
   
  window.scrollTo({ 
    top: targetScrollPosition, 
    behavior: 'smooth'
  }); 
} 
 

Можно использовать следующим образом:

 const targetElement = document.getElementById('your-element-id'); // Получаем элемент, к которому хотим прокрутить
scrollToElementWithOffset(targetElement, 20); // Прокрутка до элемента со смещением 20px от верха
 

Этот подход дает больше контроля над поведением прокрутки по сравнению с scrollIntoView(). Можно настроить смещение по мере необходимости, чтобы точно настроить положение прокрутки.

Если вы хотите непрерывно отслеживать положение прокрутки относительно элемента, можно добавить прослушиватель событий к событию window.scroll =):

 function trackScrollPosition(element) { 
  const elementTop = getElementTopPosition(element); 
   
  window.addEventListener('scroll', () => { 
    const scrollPosition = window.scrollY; 
    const distanceFromElementTop = scrollPosition - elementTop; 
     
    console.log(`Distance from element top: ${distanceFromElementTop}px`); 
     
    // Можно выполнять дополнительные действия в зависимости от положения прокрутки здесь
  }); 
} 
 
// Использование
const targetElement = document.getElementById('your-element-id'); 
trackScrollPosition(targetElement); 

Помните, что для повышения производительности вам может потребоваться отключить или ограничить прослушиватель событий прокрутки, если вы выполняете сложные операции или часто обновляете DOM на основе позиции прокрутки.