2012-12-16 2 views
0

[질문 :

모범에 링크 :http://jsfiddle.net/j65yQ/".scrollTop()"메서드의 결과 값은 무엇입니까? - jQuery를, HTML

/* First: */ 
/* Set the Position of the Division Tag to Fixed When Reaching the Top of the Window While Scrolling */ 

$(window).scroll(function(){ 

    var u_div_cn = $('div#container_nav'); 
    var u_os_top_read = $('div#container_nav').offset().top; 

    if ($(window).scrollTop() > u_os_top_read) {  
    u_div_cn.addClass('set_position');}; 

}); 

resulting value가 스크롤 할 때 얻을 .scrollTop()합니까?

위의 예에서 division tagwindow의 맨 위에 도달했을 때 conditional if statement에 의해 고정되도록 position 속성을 설정합니다.

하지만, 왜이 예에서와 .offset().top 일 "이상은"달리 "에 해당하는"많은 시도 후 작동하지zero? 예를 들어

은은 "같음"을 위해 : 나는 windowtop: 0에서뿐만 아니라 잘 작동하도록 equals to 생각하기 때문에 내가 부탁하고 왜

$(window).scroll(function(){  

    var u_div_cn = $('div#container_nav'); 
    var u_div_cn_os_top = $('div#container_nav').scrollTop(); 


    if (u_div_cn_os_top == 0) {  
     u_div_cn.addClass('set_position'); 
    }; 

}); 

이유이다.

답변

2

scrollTop 함수는 내용이 스크롤되는 횟수, 즉 창 위에 얼마나 많은 픽셀이 있는지 반환합니다.

스크롤 할 때 모든 단일 픽셀에 대해 콘텐츠가 스크롤되는 이벤트가 발생하지 않습니다. == 연산자를 사용하여 오프셋을 확인하면 대부분의 시간을 놓치게됩니다. > 연산자를 사용하면 맨 위의 창 밖으로 맨 위로 이동하자마자 요소가 고정됩니다.

scrollTop의 값을 0과 비교하면 아래로 스크롤 한 다음 다시 위로 스크롤 할 때만 해당됩니다.

+0

답변 해 주셔서 감사합니다. 이것은 내가 찾고 있었던 바로 그 것이다. 이것은 '애니메이션'에만 해당되는가요? – user1860822

+0

@ user1860822 : 아니요, 애니메이션과 관련이 없습니다. – Guffa

0

왜냐하면 창문이 구분 태그를 벗어나 스크롤하면 뷰포트에 수정하기위한 클래스가 추가되기 때문입니다.

+0

나는'window'의'top : 0'에서 올바르게 작동하는 'equals to'를 생각했습니다. 그러나 Guffa의 답변은 매우 명확합니다. – user1860822