javascript - 向下滚动页面时如何每1000px加载一个JS函数？

Question

当我向下滚动一个页面时，如何每隔 1000 px 自动执行一个 JS 函数？

如果用户向下滚动小于 1000 像素，然后向上滚动相同的量，则不会发生任何事情。

这是我要执行的函数的调用：

    refresh('refresh_status', 'refresh_status.php', '', '', '', 'refresh');

Answer 1

我假设您不想使用 jQuery，因为最初的 post 标记只是 javascript。

这是根据滚动事件检测当前高度的代码，它也是跨平台的：

function getScrollTop(){
    if(typeof pageYOffset!= 'undefined'){
        //most browsers except IE before #9
        return pageYOffset;
    }
    else{
        var docBody = document.body; //IE 'quirks'
        var docElement= document.documentElement; //IE with doctype
        docElement = (docElement.clientHeight)? docElement : docBody ;
        return docElement.scrollTop;
    }
}

window.onscroll = function (oEvent) {
    var currentScrollTop = getScrollTop(); // current position in pixels from top
    // do whatever you want here at the pixel height which you desire
}

Answer 2

您可以使用 jQuery 相对轻松地做到这一点。

$(window).scroll( function(){
    var count = 1;
    var windowPosition = $(window).scrollTop();
    if( windowPosition === count*1000 ){
        myFunction();
        count++;
        };
});

Answer 3

使用一点 jQuery 很容易！

var win = $(window),
    sectionHeight = 1000,
    currentSection = 0,
    $result = $('#result');

function myFunction(n) {
    $result.append('<p>FUNCTION CALLED ' + n + '</p>')
}

win.scroll(function (e) {
    var calculateSection = parseInt(win.scrollTop() / sectionHeight, 10);
    if (currentSection !== calculateSection) {
        currentSection = calculateSection;
        myFunction(currentSection);
    }
});

这是一个小提琴！

http://jsfiddle.net/sidonaldson/KsNcz/1/