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

这可以帮助你：http://api.jquery.com/scroll/

$( "#target" ).scroll(function() {
  $( "#log" ).append( "<div>Handler for .scroll() called.</div>" );
});

也可以利用这个

$('#target').on("mousewheel", function() {
    alert($(document).scrollTop());
});

这两个人应该让你能够弄清楚你在滚动，当你到达位置X时，做一些事情。

EDITED

让我们这样做 -

var targetPos = "500px";

$( document ).scroll(function() {
  if ($(document).scrollTop() == targetPos) {
    doBounce($(this), 2, '10px', 150);
  }
});

Answer 2

$(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 
    );
}

Answer 3

您可以通过获取元素的偏移量并减去该元素的父高度和scrollTop值来检查元素何时进入视图。

以下是一个例子：

$(document).ready(function() {
    $(document).on('scroll', function() {
        var offset  = $('.element').offset().top,
            scroll  = $(document).scrollTop(),
            height  = $(document).height(),
            inViewDown = ((offset - scroll - height) <= 0) ? true : false;
        if (inViewDown) {
            // Do some stuff
        }
    });
});

以下是一个有效的例子：http://jsfiddle.net/ughEe/

滚动时触发jquery效果

3 个答案: