Добавление класса объекту при скролле вниз, а при возвращении до верхней точки сайта убирать новодобавленый класс?

Question

[Чёкатилло]

Начинаем скроллить и через несколько пикселов добавляется класс Затем, если пользователь доскроллит до верхней точки сайта, возвращать на круги своя классы )
Оч просто, но я ж не бум-бум в скриптах )

Есть готовый вариант? Плиз, поделитесь )
Спасибо за внимание!

Comments

[Exploding]

Почему сразу не сказать, что хочешь сделать или менюшку верхнюю или кнопку вверх?)) Для менюшки кстати и js не нужен, можно в css сделать position:fixed;

[Чёкатилло]

Exploding: да бабка я старая ) Ну типа того Эт не менюшка и не кнопка вверх Эт блок который нависает сверху изначально поверх сайта, воот..и его надо убирать при скролле (по кнопке уже убирается) и снова "вытаскивать" проскроллив в самый верх сайта (в начальную точку) Кроче, блок по смыслу относится к Хедеру сайта, и он нужен только вначале просмотра пользователем

[Чёкатилло]

Exploding: Есть варик, но он не особо то что нужно. Он добавляет уже второй класс при скролле вверх, но при скролле, а не при достижении верхней начальной точки страницы Да и первый раз класс добавляет не через установленную высоту, а сразу. А вот регулировать пикселы не выходит Чет совсем не работает, если менять значения в цифрах

var oldScrollY = 0;
var div = document.getElementById("line-relative");

window.onscroll = function() {
  var scrolled = window.pageYOffset || document.documentElement.scrollTop;
  var dY = scrolled - oldScrollY;
  
  if ( dY > 0 ){
    div.className = "line-relative line-topp";
  } else {
    div.className = "line-relative line-top";
  }
  
  oldScrollY = scrolled;
}

[Михаил Федотов]

<div id="full-price">2000</div>
И сюда же JS:

var div = document.getElementById('full-price');
var coord = div.getBoundingClientRect();
window.onscroll = function() {
	if (window.pageYOffset > coord.top) {
		div.classList.add('display-none');
	} else if (div.classList.contains('display-none') && window.pageYOffset < coord.top) {
		div.classList.remove('display-none');
	}	
};

coord получает координаты div
Далее исполняем анонимную функцию при скролле.
Если текущая прокрутка сверху больше, чем верхняя координата div, то добавляем класс display-none

.display-none {
  display: none;
}

Иначе удаляем этот класс (если он присутствует и прокрутка меньше нужного).

Почему именно класс? Ну вдруг вы захотите добавить туда что-то еще.

[Чёкатилло]

Михаил: Спасибо за развернутый ответ Предлагаю поместить его в правильные )

Answer 1

[twobomb]

Вот пример для дивов

<div class="def" data-firstclass="начальный класс" data-secondclass="класс на который поменять" data-px="на какой высоте скролла поменять в px"></div>

Comments

[Чёкатилло]

Четко Спасибо большое

Answer 2

[holymotion]

https://codepen.io/brazzel1ty/pen/WEoazv