Смена стилей шапки сайта при скролле к определенному блоку? Стили должны применяться при скролле до блока и отменяться за его пределами?

Для реализации смены стилей шапки сайта при скролле к определенному блоку вам потребуется использовать JavaScript. Вот примерный алгоритм решения:

1. Необходимо найти блок, при скролле к которому вы хотите изменить стили шапки. Для примера, предположим, что у вас есть блок с id "targetBlock".

2. Сначала нужно добавить обработчик события скролла страницы. Это можно сделать следующим образом:

window.addEventListener('scroll', function() {
  // Здесь будет код, отвечающий за изменение стилей шапки при скролле
});

3. Внутри обработчика события скролла нужно проверить, доскроллен ли пользователь до блока "targetBlock". Это можно сделать с помощью метода getBoundingClientRect(), который возвращает координаты блока относительно окна просмотра.

var targetBlock = document.getElementById('targetBlock');
var blockPosition = targetBlock.getBoundingClientRect();

if (blockPosition.top <= 0) {
  // Доскроллено до блока
  // Применяем новые стили для шапки
} else {
  // Вне блока
  // Возвращаем шапке обычные стили
}

4. Далее, в зависимости от того, доскроллен ли пользователь до блока или нет, вы можете изменить стили шапки. Например, добавить класс:

var header = document.querySelector('header');

if (blockPosition.top <= 0) {
  header.classList.add('scrolled');
} else {
  header.classList.remove('scrolled');
}

5. Наконец, добавьте стили для класса "scrolled" в вашем CSS файле:

header.scrolled {
  /* Ваши стили для шапки при скролле до блока */
}

Это основной принцип работы. Не забывайте также учитывать особенности вашего сайта и вносить соответствующие изменения в код.