Как добавить/удалить class после прокрутки?

Question

[Максим]

В общем задача такая:

1) Надо чтобы к "header__section-navbar" добавлялся класс "fix" при прокрутке страницы после того как скроется "header__section-info" - Это работает!
2) При прокрутке вверх еще добавить класс "scroll-up" и удалить при достижении "header__section-info" - Тут не могу разобраться :(
3) "fix" должен удалить когда достигнет "header__section-info" - Это работает!

Задумка такая, чтобы на десктопе блок становился всегда фиксированным, а при ширине экрана меньше 992px скрывался при прокрутке вниз, а вверх показывался. Сделал бы это по средствам css.
Знаю, что можно это реализовать на yavascript, но это для меня совсем сложно ((

Может есть лучше варианты? Буду рад узнать)

document.addEventListener('DOMContentLoaded', function () {
	'use strict';

	window.addEventListener('scroll', function () {
		const prevScrollpos = window.pageYOffset;
		// fixedHeader on scroll
		function fixedHeader() {

			var sectionInfo = document.querySelector('.header__section-info').offsetHeight;
			var headerOneELement = document.querySelector('.header__section-navbar');

			if (prevScrollpos > sectionInfo) {
				headerOneELement.classList.add('fix');
				headerOneELement.classList.add('scroll-up', prevScrollpos < sectionInfo);
				document.querySelector('.header').style.marginBottom = headerOneELement.offsetHeight + 'px';

			} else {
				headerOneELement.classList.remove('fix');
				headerOneELement.classList.remove('scroll-up');
				document.querySelector('.header').style.marginBottom = '0';
			}
			lastScroll = prevScrollpos;

		}
		fixedHeader();
	});
});

Answer 1

[Valeriu Cuțebov]

Привет! Для добавления класса scroll-up при прокрутке вверх можно сохранять предыдущее значение scrollTop и сравнивать его с текущим значением при каждом событии прокрутки. Если текущее значение меньше предыдущего, то добавляем класс scroll-up, иначе удаляем его. Для удаления класса scroll-up при достижении header__section-info можно получить координаты этого элемента и удалить класс, если текущее значение scrollTop больше или равно его координатам.

Вот пример кода:

document.addEventListener('DOMContentLoaded', function () {
  'use strict';

  var prevScrollpos = window.pageYOffset;
  var sectionInfo = document.querySelector('.header__section-info').getBoundingClientRect().top + window.pageYOffset;
  var headerOneELement = document.querySelector('.header__section-navbar');

  window.addEventListener('scroll', function () {
    var currentScrollpos = window.pageYOffset;

    // fixedHeader on scroll
    function fixedHeader() {
      if (currentScrollpos > sectionInfo) {
        headerOneELement.classList.add('fix');
        headerOneELement.classList.add('scroll-up');
        document.querySelector('.header').style.marginBottom = headerOneELement.offsetHeight + 'px';

        if (currentScrollpos < prevScrollpos) {
          headerOneELement.classList.remove('scroll-up');
        }
      } else {
        headerOneELement.classList.remove('fix');
        headerOneELement.classList.remove('scroll-up');
        document.querySelector('.header').style.marginBottom = '0';
      }
      prevScrollpos = currentScrollpos;
    }

    fixedHeader();
  });
});

Обрати внимание, что я сохраняю координаты header__section-info в переменной sectionInfo с учетом текущего значения scrollTop. Я также инициализирую переменную prevScrollpos вне функции обработчика события прокрутки, чтобы она была доступна внутри обработчика и сохраняла значение scrollTop предыдущего события.

Comments

[Максим]

Немного подправил код. Теперь Работает как надо!!! Огромное спасибо!!!

document.addEventListener('DOMContentLoaded', function () {
	'use strict';
 
	var prevScrollpos = window.pageYOffset;
	var sectionInfo = document.querySelector('.header__section-info').getBoundingClientRect().top + window.pageYOffset;
	var headerOneELement = document.querySelector('.header__section-navbar');
 
	window.addEventListener('scroll', function () {
	  var currentScrollpos = window.pageYOffset;
 
	  // fixedHeader on scroll
	  function fixedHeader() {
		 if (currentScrollpos > sectionInfo) {
			headerOneELement.classList.add('fix');
			headerOneELement.classList.remove('scroll-up');
			document.querySelector('.page__header').style.marginBottom = headerOneELement.offsetHeight + 'px';
 
			if (currentScrollpos < prevScrollpos) {
			  headerOneELement.classList.add('scroll-up');
			}
		 } else {
			headerOneELement.classList.remove('fix');
			headerOneELement.classList.remove('scroll-up');
			document.querySelector('.page__header').style.marginBottom = '0';
		 }
		 prevScrollpos = currentScrollpos;
	  }
 
	  fixedHeader();
	});
 });

[HardBot]

Фу, кто-то ещё юзает этот недоскролл? —_—
Observer для всех шутка наверное

[Максим]

HardBot, Не слыхал(
Что это такое?

[Valeriu Cuțebov]

Максим, Рад, что мой ответ помог! Ваш исправленный код выглядит правильным и должен работать как надо. Удачи с вашим проектом!

[HardBot]

Максим, https://developer.mozilla.org/ru/docs/Web/API/Inte...

[Максим]

Valeriu Cuțebov, Теперь новая проблема :(

Теперь класс добавляется сразу после прокрутки, а не тогда как скроется блок "header__section-info"
может из-за этого:

var sectionInfo = document.querySelector('.header__section-info').getBoundingClientRect().top + window.pageYOffset;

Работало когда было так:

var sectionInfo = document.querySelector('.header__section-info').offsetHeight;

[Valeriu Cuțebov]

Для добавления класса scroll-up при прокрутке вверх и его удаления при достижении header__section-info, вам нужно изменить функцию fixedHeader() следующим образом:

function fixedHeader() {
  if (currentScrollpos > sectionInfo) {
    headerOneELement.classList.add('fix');
    document.querySelector('.page__header').style.marginBottom = headerOneELement.offsetHeight + 'px';

    if (currentScrollpos < prevScrollpos) {
      headerOneELement.classList.add('scroll-up');
    } else {
      headerOneELement.classList.remove('scroll-up');
    }
  } else {
    headerOneELement.classList.remove('fix');
    headerOneELement.classList.remove('scroll-up');
    document.querySelector('.page__header').style.marginBottom = '0';
  }
  prevScrollpos = currentScrollpos;
}

Когда пользователь прокручивает страницу вверх, мы добавляем класс scroll-up, а когда пользователь прокручивает страницу вниз, мы удаляем этот класс, если пользователь достигает header__section-info. Обратите внимание, что мы также удаляем класс scroll-up в блоке else для случаев, когда пользователь достигает верха страницы.

Касательно вашего вопроса про изменение sectionInfo переменной, ее значение должно быть вычислено как расстояние от верха страницы до нижней границы header__section-info вместо высоты элемента. Используйте следующий код:

var sectionInfo = document.querySelector('.header__section-info').getBoundingClientRect().bottom;

Конечный код может выглядеть следующим образом:

document.addEventListener('DOMContentLoaded', function() {
  'use strict';

  var prevScrollpos = window.pageYOffset;
  var sectionInfo = document.querySelector('.header__section-info').getBoundingClientRect().bottom;
  var headerOneElement = document.querySelector('.header__section-navbar');

  window.addEventListener('scroll', function() {
    var currentScrollpos = window.pageYOffset;

    // fixedHeader on scroll
    function fixedHeader() {
      if (currentScrollpos > sectionInfo) {
        headerOneElement.classList.add('fix');
        document.querySelector('.page__header').style.marginBottom = headerOneElement.offsetHeight + 'px';

        if (currentScrollpos < prevScrollpos) {
          headerOneElement.classList.add('scroll-up');
        } else {
          headerOneElement.classList.remove('scroll-up');
        }
      } else {
        headerOneElement.classList.remove('fix');
        headerOneElement.classList.remove('scroll-up');
        document.querySelector('.page__header').style.marginBottom = '0';
      }
      prevScrollpos = currentScrollpos;
    }

    fixedHeader();
  });
});

В этом коде мы использовали getBoundingClientRect().bottom для определения расстояния от верха страницы до нижней границы header__section-info.

Надеюсь, это поможет!

[Максим]

Valeriu Cuțebov, Да, помогло! Спасибо!