Javascript - 执行多个不同的 window.onscroll
Javascript - execute multiple different window.onscroll
我在这里遇到了一个小问题。我有关于 Javascript 的基本知识,我想执行以下操作:
现在,当您向下滚动时,菜单会变小。当你回去时,它将 return 恢复正常。我将此事件称为 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();
现在我想要另一个函数对我的号召性用语按钮产生一些效果,让我们调用函数 "test",但是如果我想像上面一样这样做,效果函数不起作用再:
function test(){
//do something
}
window.onscroll = test();
欢迎任何帮助!我认为这样做不会是一个很大的挑战,但我想我做错了。 (PS: 否 JQUERY 请)
您可以通过 window.onscroll = blabla
覆盖 onscroll 函数
你可以做到:
window.onscroll = function() {
effects();
test();
}
或
window.addEventListener('scroll', effects);
window.addEventListener('scroll', test);
您可以为滚动事件使用多个侦听器。
window.addEventListener('scroll', effects);
window.addEventListener('scroll', test);
这样你就不会覆盖 window.onscroll
我在这里遇到了一个小问题。我有关于 Javascript 的基本知识,我想执行以下操作:
现在,当您向下滚动时,菜单会变小。当你回去时,它将 return 恢复正常。我将此事件称为 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();
现在我想要另一个函数对我的号召性用语按钮产生一些效果,让我们调用函数 "test",但是如果我想像上面一样这样做,效果函数不起作用再:
function test(){
//do something
}
window.onscroll = test();
欢迎任何帮助!我认为这样做不会是一个很大的挑战,但我想我做错了。 (PS: 否 JQUERY 请)
您可以通过 window.onscroll = blabla
你可以做到:
window.onscroll = function() {
effects();
test();
}
或
window.addEventListener('scroll', effects);
window.addEventListener('scroll', test);
您可以为滚动事件使用多个侦听器。
window.addEventListener('scroll', effects);
window.addEventListener('scroll', test);
这样你就不会覆盖 window.onscroll