Как изменить стиль шапки сайта при прокрутке до определенного блока и вернуть исходный стиль при прокрутке за его пределы?

Question

Мирон

html , javascript , css

Как изменить стиль шапки сайта при прокрутке до определенного блока и вернуть исходный стиль при прокрутке за его пределы?

Каким образом можно изменить цвет фона шапки сайта при прокрутке до определенного блока на странице, используя JavaScript и CSS? Вот пример кода, который уже содержит необходимую структуру, но требует завершения функции changeHeaderColor() для достижения этой цели.

25 апреля 2024 г. 9:30

Ответы на вопрос 2

Похожие вопросы

Answer 1

HTML:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Header Color on Scroll</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header id="header">
<h1>My Website</h1>
</header>
<section id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi.</p>
</section>
<script src="script.js"></script>
</body>
</html>
```

CSS (styles.css):
```css
body {
margin: 0;
font-family: Arial, sans-serif;
}

header {
position: fixed;
top: 0;
width: 100%;
height: 80px;
background-color: #333;
color: white;
text-align: center;
}

section {
padding: 20px;
}
```

JavaScript (script.js):
```javascript
function changeHeaderColor() {
const header = document.getElementById('header');
const content = document.getElementById('content');

const headerPosition = header.offsetTop + header.offsetHeight;

if (window.pageYOffset >= headerPosition) {
header.style.backgroundColor = 'blue';
} else {
header.style.backgroundColor = '#333';
}
}

window.addEventListener('scroll', changeHeaderColor);
```

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

Answer 2

Используй IntersectionObserver , его как раз и придумали для подобных задач 
 
 демо