Почему скрипт перекрывается другим скриптом?

Question

[Дмитрий]

В общем есть вот такое:

var arrowTop = document.querySelector('#page-scroll-top'); //появление кнопки 'вверх'
	document.onscroll = function() {
		if(document.body.scrollTop > 200){
			arrowTop.style.opacity = '1';
		} else{
			arrowTop.style.opacity = '0';
		}
	};

	var translate= document.querySelector('#nav-wrapper'); //скрытие верхней навигации
	document.onscroll = function() {
		if(document.body.scrollTop > 250){
			translate.style.transform = 'translateY(-90px)';
		} else{
			translate.style.transform = 'translateY(0)';
		}
	};

Ну и получается так, что тот скрипт, который стоит последним, перекрывает предыдущий. Я понимаю почему так происходит, но как его поправить я не знаю. Хелп

Answer 1

[DevMan]

https://developer.mozilla.org/en-US/docs/Web/API/E...
www.w3schools.com/jsref/met_document_addeventliste...

Comments

[Дмитрий]

Т.е. нужно что-то типо такого написать?

var arrowTop = document.querySelector('#page-scroll-top');

function scrollTop(e){
	if(document.body.scrollTop > 200){
		arrowTop.style.opacity = '1';
	} else{
		arrowTop.style.opacity = '0';
	}
};

document.addEventListener('onscroll', scrollTop);

[DevMan]

Дмитрий: угу. ибо в вашем коде каждый последующий "document.onscroll = " переписывает предыдущий.

пример https://jsfiddle.net/0q2h0m82/

[Дмитрий]

DevMan: тогда я скажу, что такой код не работает вообще) Смотрел конкретно по примерам ваших ссылок, потому ошибок не вижу. Можете посмотреть внимательнее?

[DevMan]

Дмитрий: я же показал пример на jsfiddle.
document.addEventListener('scroll', scrollTop);
a не
document.addEventListener('onscroll', scrollTop);

[Дмитрий]

DevMan: да, извиняюсь. Увидел, исправил, не успел отписать) Спасибо большое

[DevMan]

Дмитрий: пожалуйста)

[Дмитрий]

DevMan: воспользуюсь моментом. Не знаете какой-то простенькой библиотеки для создания пагинации страницы? (боковая пагинация страницы по блокам)
Ну или пример решения

[DevMan]

Дмитрий: увы, не знаю.