스크롤 할 때 jquery 효과가 발생합니다.

Question

안녕하세요, 저는 다른 질문으로 돌아 왔습니다. 내 사이트의 div에 수신 거부 효과를 추가하려면 아래 코드를 사용하고 있습니다. 그것은 지금 잘 작동하지만 시작하려면 효과를 클릭하기 위해 div를 클릭해야합니다. 사용자가 페이지를 아래로 스크롤하여 해당 섹션에 도달하면 자동으로 효과를 트리거하도록 수정하고 싶습니다. 아래의 코드를 수정하여 사용자가 스크롤을 내려 사이트의 해당 섹션에 도달했을 때 효과를 트리거하려면 어떻게해야합니까? http://api.jquery.com/scroll/

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

는 또한이

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

함께 그 두 당신에게 받아야하는 능력을 활용 : 여기

내가 당신을 도움이 될 것입니다

$(".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

이를 사용하여 '코드입니다 당신이 스크롤하는 것을 알기 위해서, 그리고 X 위치에 도달했을 때, 뭔가를하십시오.

편집

의이 그것을 이런 식으로 가자 -

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

당신은 단순히 요소가 요소의 오프셋 (offset)를 복용하고 해당 요소의 부모의 높이를 뺀보기에 올 때 확인할 수 있으며, 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/