javascript - 滚动时触发 jquery 效果

Question

嘿伙计们，我带着另一个问题回来了。我正在使用下面的代码向我网站上的 div 添加弹跳效果。现在效果很好，但必须单击 div 才能启动效果。我想修改它，以便当用户向下滚动页面并到达该部分时，它会自动触发效果。如何修改下面的代码以在用户向下滚动并到达网站的该部分时触发效果？

这是我使用的代码

$(".servi-block").click(function () {
    doBounce($(this), 2, '10px', 150);
});

function doBounce(element, times, distance, speed) {
    for (i = 0; i < times; i++) {
        element.animate({
            marginTop: '-=' + distance
        }, speed)
            .animate({
            marginTop: '+=' + distance
        }, speed);
    }
}

Answer 1

$(window).scroll(function(event){
    isElementVisible = inViewport($(".servi-block"));
    if(isElementVisible)
    { 
        doBounce($(this), 2, '10px', 150); 
    }   
});


function inViewport (el) 
{
    var r, html;
    if ( !el || 1 !== el.nodeType ) { return false; }
    html = document.documentElement;
    r = el.getBoundingClientRect();

    return ( !!r 
      && r.bottom >= 0 
      && r.right >= 0 
      && r.top <= html.clientHeight 
      && r.left <= html.clientWidth 
    );
}