onscroll事件仅执行一次

onscroll event executes only once

本文关键字：一次 事件 执行 onscroll      更新时间：2023-09-26

我使用此代码在滚动时获取页面中元素的偏移量，但滚动函数仅执行一次并提醒视口宽度，然后它停止在"off"变量处

这是原始脚本中的一个简单的示例，它不仅仅是将 #menuIcon 设置为始终固定

$(document).ready(function(){
document.body.style.overflow = "hidden";
var viewportWidth = $(window).innerWidth();
document.body.style.overflow = "";
window.onscroll = scrolls(viewportWidth);
});
function scrolls(viewportWidth){
alert(viewportWidth);
if(viewportWidth>100 && viewportWidth<=820){
    alert('test');
    var w = $(window);
    var offset = $("#menuIcon").offset();
    var off = offset.top-w.scrollTop();
    if(off<='10'){
        $("#menuIcon").css({"position":"fixed","top":"20px"});
    }
}
}

斯菲德尔

问题是onscroll被分配了运行scrolls(viewportWidth)的结果，但你真正想要的是给onscroll一个运行函数。如果你想通过viewportWidth，你可以改为：

window.onscroll = function() {
  scrolls(viewportWidth);
};

您更新的 JSFiddle： https://jsfiddle.net/n8vms2js/6/

当你这样做时，你正在将函数的结果附加到onscroll事件：

window.onscroll = scrolls(viewportWidth);

相反，您必须像这样附加可调用对象：

window.onscroll = scrolls;

然后通过获取函数内的视口宽度来使其适应您的需求，或者使用匿名函数使用预先计算的视口宽度调用您的 scrolls 函数，如下所示：

window.onscroll = function () {scrolls(viewportWidth)};

小提琴：

  • https://jsfiddle.net/n8vms2js/3/
  • https://jsfiddle.net/n8vms2js/4/
相关文章：