Javascript - выполнить несколько разных window.onscroll

#javascript #function #onscroll

#javascript #функция #onscroll

Вопрос:

Здесь я столкнулся с небольшой проблемой. У меня есть базовые знания о Javascript, и я хочу сделать следующее:

Прямо сейчас, когда вы прокручиваете вниз, меню становится меньше. когда вы вернетесь назад, все вернется в нормальное состояние. Я вызываю это событие с помощью window.onscroll:

 var diff = 0;
function effects(){
var topDistance = (document.documentElement amp;amp;     document.documentElement.scrollTop) ||  document.body.scrollTop;
var clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

if(topDistance > diff){ 
    diff = topDistance;
    if(clientWidth > 1024){
        if(topDistance > 300){
            document.getElementById("header").style.marginTop= "-100px";
        }
    }
}else if(topDistance < diff){
    diff = topDistance;
    if(clientWidth > 1024){
        if(topDistance > 300){
            document.getElementById("header").style.marginTop= "0";
        }
    }
}
}

window.onscroll = effects();

Теперь я хочу, чтобы другая функция имела некоторые эффекты для моих кнопок призыва к действию, давайте вызовем функцию «test», но если я хочу сделать это так же, как указано выше, функции эффектов больше не работают:

 function test(){
//do something
}
window.onscroll = test();

Любая помощь приветствуется! Я думаю, что это не будет большой проблемой, но я делаю это неправильно, я думаю. (PS: ПОЖАЛУЙСТА, БЕЗ JQUERY)

1. Итак, вы хотите вызвать две функции при прокрутке? Но вы также хотите иметь effects стиль заголовка и test стиль некоторых кнопок, но оба выполняют одинаковые проверки высоты прокрутки / смещения?

2. Кроме того, вы можете также рассмотреть возможность отмены вашей функции onscroll: davidwalsh.name/javascript-debounce-function

Ответ №1:

Вы переопределяете функцию onscroll, выполнив window.onscroll = blabla

Вы можете сделать :

 window.onscroll = function() {
  effects();
  test();
}

или

 window.addEventListener('scroll', effects);
window.addEventListener('scroll', test);

Ответ №2:

Вы можете использовать несколько прослушивателей для события прокрутки.

 window.addEventListener('scroll', effects);
window.addEventListener('scroll', test);

Таким образом, вы не переопределяете window.onscroll

Ответ №3:

вы должны использовать

window.addEventListener

вместо window.onscroll

1. Добро пожаловать в SO! Пожалуйста, взгляните на другие ответы, которые были даны ранее. Ваш подход уже упоминается там. Чтобы сохранить сайт понятным и упростить поиск ответов, мы стараемся избегать двойных ответов.