При скроле менять класс у body

102
30 января 2021, 03:20

Никак не получается решить задачку:

Использую scrollify.js на сайте (при скроле вниз/вверх переходим к следующему блоку). В body мне надо добавлять класс с индексом текущего слайда:

<body class="desktop-page slider-1">  // открыт первый слайдер
<body class="desktop-page slider-2"> // открыт второй слайдер и т.д...

Я пробовал сделать так:

var sno = index+1; // Получаем текущий индекс слайда
document.getElementsByTagName("body")[0].className = 'desktop-page slider-'+sno; // Перезаписываем класс

Да, так все работает, но проблема в том, что мне надо не трогать класс desktop-page, то есть менять только slider-(тут индекс текущего слайда).

Была еще попытка сделать так:

$("body").removeClass("slider-" + String(sno-1));
$("body").addClass("slider-" + String(sno));

Так все работает только при скроле вниз. Когда скролим наверх получается хаос.

Подскажите пожалуйста, как реализовать такое? Можно на JS, можно на jquery. Без разницы.

Answer 1

Ну только клик замени на скролл по условиям.

const btn = document.getElementById('btn'); 
const btnr = document.getElementById('btnr'); 
 
btn.addEventListener('click', () => { 
  document.getElementsByTagName("body")[0].classList.add('class1'); 
}); 
 
btnr.addEventListener('click', () => { 
  document.getElementsByTagName("body")[0].classList.remove('class1'); 
});
.class1 { 
  background-color: red; 
}
<p id="btn">add class</p> 
<p id="btnr">remove class</p>

READ ALSO
Как вывести массив json полученный в ответе ajax в таблицу
javascript

Как вывести массив json полученный в ответе ajax в таблицу

Не могу заполнить таблицу данными которые приходят от сервлета с помощью ajaxСитуация такая, при нажатии на объект в таблице я отправляю его...

 118
Что такое IIFE и как это работает [дубликат]
javascript

Что такое IIFE и как это работает [дубликат]

Последняя задача отсюда: https://learnjavascript

 103
Написание функции по moveUp и moveDowm [дубликат]
javascript

Написание функции по moveUp и moveDowm [дубликат]

В консоли у меня все работаетТам для скрола вниз я ввожу:

 98
Экспорт таблицы из сайта в excel
javascript

Экспорт таблицы из сайта в excel

Всем привет! У меня такой вопросНа собственном закрытом сайте есть таблица, которую время от времени надо экспортировать в excel

 88