Как сделать, чтобы при скролле шапки класс добавлялся к нескольким элементам сразу?
Здравствуйте.
Не могу сделать так, чтобы к нескольким элементам шапки с одинаковым классом добавлялся класс active после скролла на 2 экран. А также удалялся при возвращении на 1 экран.
Пробовала разные способы, но класс добавляется/удаляется только у одного элемента и все.
Код результата:
snippet
Подскажите, пожалуйста, что не так...
Дополнительно:
Если хочешь добавить класс active ко всем ссылкам в меню, то поменяй:
const menu = document.querySelector('.menu-block__link');
На:
const menu = document.querySelectorAll('.menu-block__link');
И:
menu.classList.add(activeClass);
На:
for(let i = 0; i < menu.length; i++ ){
menu[i].classList.add(activeClass);
}
querySelectorAll
а вообще если все элемент вложенны в header, то нет необходимости задавать им активный класс.
.header.active .нужны селектор {}
- Такой вариант выдает ошибку TypeError: menu.classList is undefined. Так как querySelectorAll применяется только к родительскому элементу.
При применении стилей в классе _scroll меняются стили самой шапки. А мне нужно только на ссылки воздействовать. -
а вообще если все элемент вложенны в header, то нет необходимости задавать им активный класс.
Изначально у меня уже заданы стили у меню. Необходимо их переопределить после того, как оно проскроллится вниз на 2 экран и вернуть при скролле вверх
- Дарья,
Такой вариант выдает ошибку TypeError: menu.classList is undefined
потому что нужно немного внимательнее прочитать доку и понять, что querySelectorAll возращает NodeList и переписать код примерно так:
const menuLinks = document.querySelectorAll('.menu-block__link'); menuLinks.forEach((link) => { // ... })
const menuLinks = document.querySelectorAll('.menu-block__link'); menuLinks.forEach((link) => { // ... })
Изначально у меня уже заданы стили у меню. Необходимо их переопределить после того, как оно проскроллится вниз на 2 экран и вернуть при скролле вверх.
Нет необходимости получать все пункты меню и бегать по ним циклом. Достаточно задать родительскому контейнеру класс в нужный момент и переопределить с помощью него стили ссылок
- fokit,
Не могли бы вы привести пример такого переопределения, а то я не могу понять с какой стороны подступиться...
Заранее спасибо!
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы при скролле страницы добавлять класс к нескольким элементам сразу, можно воспользоваться JavaScript. Ниже приведен пример кода, который позволит добавлять класс к нескольким элементам при скролле:
```html
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #333;
color: white;
padding: 10px 0;
transition: top 0.3s;
}
.sticky {
top: -50px; /* Выберите необходимое значение сдвига */
}
.section {
height: 500px;
background-color: #f2f2f2;
margin-top: 50px;
}
Моя шапка
Секция 1
Секция 2
Секция 3
window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeader");
var sections = document.getElementsByClassName("section");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
for (var i = 0; i < sections.length; i++) {
sections[i].classList.add("sticky");
}
} else {
header.classList.remove("sticky");
for (var i = 0; i < sections.length; i++) {
sections[i].classList.remove("sticky");
}
}
}
```
В данном примере при скролле страницы класс "sticky" добавляется к шапке и ко всем секциям одновременно. Вы можете настроить значение сдвига и стили класса "sticky" под ваш дизайн. Надеюсь, это поможет вам решить вашу проблему!