Нужно сделать анимацию header на 320px и 992px через js, но код работает только на одном из поинтов

Рейтинг: 1Ответов: 1Опубликовано: 09.02.2023

Есть два файла header-320px.js и header-992px.js. Анимация присутствует только на 992px

// код с файла header-320px.js

const header320px = document.querySelector('#header-s');

document.onscroll = function(){
    const scroll320px = window.scrollY;
   
    if(scroll320px > 85){
      header320px.classList.add('active320px');
    } else {
      header320px.classList.remove('active320px');
}

// код с файла header-992px.js

const header = document.querySelector('#header-scroll');
const headerH = document.querySelector('#header-scroll').clientHeight;

document.onscroll = function(){
  const scroll = window.scrollY;

  if(scroll > headerH){
    header.classList.add('activeh');
  } else {
    header.classList.remove('activeh');
  }
}

javascript
Источник: Stack Overflow на русском

Ответы

▲ 0

Если вы присвоите условной переменной a значение 10, а потом значение 20, будет ли она иметь одновременно два значения? Здесь принцип тот же: вы сначала записываете в onscroll одну функцию, а потом другую. Соответственно будет работать только последняя.

Используйте для этих целей addEventListener(документация):

// код с файла header-320px.js

const header320px = document.querySelector('#header-s');

document.addEventListener('scroll', function(){
    const scroll320px = window.scrollY;
   
    if(scroll320px > 85){
      header320px.classList.add('active320px');
    } else {
      header320px.classList.remove('active320px');
})

// код с файла header-992px.js

const header = document.querySelector('#header-scroll');
const headerH = document.querySelector('#header-scroll').clientHeight;

document.addEventListener('scroll', function(){
  const scroll = window.scrollY;

  if(scroll > headerH){
    header.classList.add('activeh');
  } else {
    header.classList.remove('activeh');
  }
})