Я пытаюсь динамически настроить липкое позиционирование моего заголовка с помощью JS. Как я могу этого добиться? ⇐ CSS

[Anonymous]

Это мой первый личный проект, и у меня возникли проблемы с динамическим изменением закрепленного положения заголовка с помощью JS. Все, что я хочу сделать, это удалить закрепленное позиционирование, которое я установил для главного класса после того, как прокрутил нижнюю часть вводного класса. Как мне добиться этого с помощью JavaScript?
Это HTML-код для заголовка и вводного раздела.



Health & Wellness








Search
Home
About
Services




Health & Wellness Blog Articles
Read posts from experts at Harvard Health Publishing covering a variety of health topics and perspectives on medical news.


Вот CSS
#head{
display: flex;
justify-content: space-between;
align-items: center;
margin: 10px;
background-color: #CDFFFC;
min-height: 150px;
padding: 15px;

}
.sticky {
position: sticky;
top: 0;
width: 100%;
z-index: 1000;
background-color: #CDFFFC;

А вот Javascript


window.addEventListener('scroll', function() {

const header = document.getElementById('head');
const introSection = document.getElementById ('intro');

// Calculate the bottom position of the intro section

const introBottom = introSection.offsetTop + introSection.offsetHeight;

if(window.scrollY >= introBottom) {
header.classList.remove('sticky');
}else {
header.classList.add('sticky');
}
});


Подробнее здесь: https://stackoverflow.com/questions/791 ... ith-js-how