2012-09-13 8 views
1

웹 사이트를 개발 중이며 버튼이 있습니다 (위치가 고정되어 있습니다). 클릭 할 때마다 클래스가있는 다음 div로 스크롤해야합니다. " picture "이고 scrollTop(). top 값 아래에 있습니다. div를 배열 x, y 위치에 저장합니다.

$(document).ready(function() 
{ 

    var $pictures = $('.picture'); 

    var i; 

    $(window).scroll(function() 
    { 
    for(i in $pictures) 
    { 
     if($("html").scrollTop() > $pictures[i].offset().top) 
     { 
     alert(i); 
     } 
    } 
    }); 
}); 

불행히도 그것은 작동하지 않습니다 ... 나는 $ 사진 배열의 클래스 = "그림"으로 된 div를 저장하지만, 필요할 있는지 확실하지 않습니다. 어쩌면 누군가가 더 나은 방법이 있을까요?

감사합니다.

+1

흠 ... 왜 수동으로 선택 객체를 반복하는 대신 단지된다 jquerys .each() 메서드 사용? –

+1

jsFiddle이 질문에 대답하는 데 도움이 될 것이라고 생각합니다. – JoeFletch

답변

1

시도해보십시오. 잘못 입력 된 for-in 루프를 제외하고 $('html').scrollTop() 대신 항상 $(window).scrollTop()을 계산해야하며 항상 0입니다.

http://jsfiddle.net/mblase75/Uysmz/

$(document).ready(function() { 
    var $pictures = $('.picture'); 

    $(window).scroll(function() { 
     $pictures.each(function(i, el) { 
      if ($(window).scrollTop() > $(this).offset().top) { 
       console.log(i); 
      }; 
     }); 
    }); 
});​ 

는 화면 밖으로까지 스크롤 것 EVERY 사진의 인덱스 번호를 기록합니다. 당신은 단지 화면 스크롤 된 마지막 사진을 원하는 경우 또는, 당신은 대신 .filter 기능을 사용할 수

$(document).ready(function() { 
    var $pictures = $('.picture'); 

    $(window).scroll(function() { 
     $justpast = $pictures.filter(function(i, el) { 
      return ($(window).scrollTop() > $(this).offset().top); 
     }).last(); 
     console.log($justpast.index()); 
    }); 
});​ 

http://jsfiddle.net/mblase75/RuR6R/

관련 문제