Как я могу сделать прокрутку своего фиксированного заголовка, когда конкретный div попадает в него, или когда это 100px сверху

Question

Я вижу множество способов сделать что-то противоположное тому, чего я пытаюсь достичь, но отмечу, что мне нужно.

У меня есть фиксированный заголовок высотой 100px.Я хочу, чтобы он прокручивался вместе с остальной частью страницы, когда указанный div попадает в заголовок или в 100px от верхней части экрана.

Я добавил класс прокрутки к заголовку, который был буквально простоделая его абсолютным, вызывая скачок заголовка экрана.Затем я перевел его обратно в поле зрения, это не сработало одинаково для всех размеров экрана.

Моя следующая идея, возможно, сохранить его фиксированным, но добавить отрицательный transformY в заголовок, в зависимости от положения прокрутки.Это дало бы тот же эффект, которого я добиваюсь, но я не совсем уверен, как этого добиться.

Если вам нужна дополнительная информация, я рад предоставить ее.

edit:

Вот несколько снимков экрана:

в верхней части страницы:

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

Answer 1

Проверьте мое решение. Надеюсь, это поможет.

const headerEl = document.querySelector('header')
const targetEl = document.querySelector('#target')

const targetTopPos = targetEl.getBoundingClientRect().top

let isHeaderFixed = true

document.onscroll = () => {
  const targetTopOffset = targetEl.getBoundingClientRect().top
  
  if (isHeaderFixed && targetTopOffset < 100) {
    headerEl.style.position = 'absolute'
    headerEl.style.top = `${targetTopPos - 100}px`
    isHeaderFixed = !isHeaderFixed
  }
  
  if (!isHeaderFixed && targetTopOffset >= 100) {
    headerEl.style.position = 'fixed'
    headerEl.style.top = '0px'
    isHeaderFixed = !isHeaderFixed
  }
}

body {
  padding: 0;
  margin: 0;
  position: relative;
}

header {
  position: fixed;
  height: 100px;
  width: 100%;
  background: lightblue;
}

.content {
  line-height: 100px;
}

.target {
  width: 100%;
  background: red;
}

<header>
  Custom header
</header>
<div class="content">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam suscipit tellus urna, ut tristique felis lobortis sed. Phasellus maximus at magna mattis vulputate. Pellentesque tempor, urna vitae congue pellentesque, est mauris faucibus nulla, vitae molestie leo purus a leo. Curabitur ut mi ac sem finibus consectetur a blandit massa. Morbi ornare tincidunt ipsum, et accumsan erat fringilla a. Cras egestas, nibh vel condimentum ultrices, nunc ipsum tempus magna, eu ullamcorper tortor magna id lacus. Morbi euismod lacus a ligula rutrum, in aliquet lectus blandit. Nam placerat sollicitudin lectus eu ornare. Etiam placerat diam eget magna blandit rutrum. Nulla et luctus massa. Sed sit amet mauris in magna tincidunt consequat. Proin mattis sit amet arcu a gravida. Nullam tempor urna nec dolor convallis consectetur sit amet a elit. Cras ut odio nec lacus efficitur porta nec sit amet justo.
</div>
<div id="target" class="target">target</div>
<div class="content">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam suscipit tellus urna, ut tristique felis lobortis sed. Phasellus maximus at magna mattis vulputate. Pellentesque tempor, urna vitae congue pellentesque, est mauris faucibus nulla, vitae molestie leo purus a leo. Curabitur ut mi ac sem finibus consectetur a blandit massa. Morbi ornare tincidunt ipsum, et accumsan erat fringilla a. Cras egestas, nibh vel condimentum ultrices, nunc ipsum tempus magna, eu ullamcorper tortor magna id lacus. Morbi euismod lacus a ligula rutrum, in aliquet lectus blandit. Nam placerat sollicitudin lectus eu ornare. Etiam placerat diam eget magna blandit rutrum. Nulla et luctus massa. Sed sit amet mauris in magna tincidunt consequat. Proin mattis sit amet arcu a gravida. Nullam tempor urna nec dolor convallis consectetur sit amet a elit. Cras ut odio nec lacus efficitur porta nec sit amet justo.
</div>

Answer 2

Я должен по умолчанию сделать .header {position: absolute} и добавить этот класс в css (пока не в элемент):

.header.active {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

Тогда поймите, когда нам нужно перенести это событие в заголовок. JS поможет:

var targetElement = document.querySelector( YOUR TARGET ELEMENT ),
    header = document.querySelector('.header');

window.onscroll = function(event){
  if ( targetElement.offsetTop > window.pageYOffset ) {
    header.classList.add('active');
  } else {
    header.classList.remove('active');
  }
}

Целевой элемент - это элемент, который, когда вы хотите достичь, заголовок будет зафиксирован. Если вам нужно