javascript - onscroll事件仅执行一次

我正在使用此代码在滚动时获取页面中某个元素的偏移量，但滚动功能仅执行一次并提醒viewportWidth，然后在“ 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"});
    }
}
}

jsfiddle

最佳答案

问题是onscroll被分配了运行scrolls(viewportWidth)的结果，但是您真正想要的是赋予onscroll一个要运行的功能。如果要通过viewportWidth，可以改为：

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

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