Javascript - 执行多个不同的window.onscroll

问题描述

我在这里面临一些小问题。我有Javascript的基本知识，我想做以下事情：

现在，当您向下滚动时，菜单会变小。当你回去时，它会恢复正常。我用window.onscroll调用这个事件：

  var diff = 0; 
 function effects（）{
 var topDistance =（document.documentElement&& 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（）; 
  

现在我想让另一个函数对我的调用按钮有一些效果，让我们调用函数测试，但如果我想以类似上面的方式执行此操作，则效果函数不再有效：

 函数测试（）{
 //做某事
} 
 window.onscroll = test（）; 
  

欢迎任何帮助！我认为这不会是一个很大的挑战，但我认为这样做是错误的。 （PS：NO JQUERY PLEASE）

解决方案

通过执行 window.onscroll = blabla

您可以这样做：

 窗口.onscroll = function（）{
 effects（）; 
 test（）; 
} 
  

或

  window.addEventListener（'scroll'，effects）; 
 window.addEventListener（'scroll'，test）; 
  

I am facing a little problem here. I have basic knowledge about Javascript and i want to do the following:

Right now, when you scroll down, the menu will get smaller. when you go back up, it will return to normal. I call this event with window.onscroll:

var diff = 0;
function effects(){
var topDistance = (document.documentElement &&     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();

Now i want another function to have some effects to my call to action buttons, lets call the function "test", but if i want to do this the same way like above, the effects functions does not work anymore:

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

Any help is welcome! I tihnk it won't be a big challenge to do this, but i am doing it wrong i guess. (PS: NO JQUERY PLEASE)

解决方案

You override onscroll function by doing window.onscroll = blabla

You can do :

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

or

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

这篇关于Javascript - 执行多个不同的window.onscroll的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！