onscroll事件僅執行一次

Question

我正在使用此代碼在滾動時獲取頁面中某個元素的偏移量，但滾動功能僅執行一次並提醒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

Answer 1

問題是為onscroll分配了運行scrolls(viewportWidth)的結果，但是您真正想要的是賦予onscroll一個要運行的功能。 如果要傳遞viewportWidth ，可以改為：

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

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

Answer 2

像這樣將函數的結果附加到onscroll事件上：

window.onscroll = scrolls(viewportWidth);

相反，您必須像這樣附加可調用對象：

window.onscroll = scrolls;

然后通過獲取函數內部的視口寬度來使其適應您的需求，或者使用匿名函數以預先計算的視口寬度來調用您的scrolls函數，如下所示：

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

小提琴：

• https://jsfiddle.net/n8vms2js/3/
• https://jsfiddle.net/n8vms2js/4/