본문 바로가기

개발/자바스크립트

jQuery offset top left 값 가져오기

이미지 출처: http://jquery.com/

우선 jQuery의 js 파일이 포함되어 있다고 가정합니다.



var elementTop = $("#ID 또는 .클래스:last 한 개 또는 태그 요소 하나").offset().top;

var elementLeft = $("#ID 또는 .클래스:eq(0) 한 개 또는 태그 요소 하나").offset().left;


위와 같이 특정 요소의 top 위치와 left 위치를 알아내는 데 사용됩니다.


변수 elementTop ,  elementLeft  위치 값을 이용해서


특정 위치에 고정시키거나 스크롤이 움직임에 따라 top의 값과 비교해서 이벤트를 줄 수도 있습니다.


var st = 0;

$(window).scroll(function(event){

    st = $(this).scrollTop();

});


if ( elementTop  > st ) {

//스크롤 값이 특정 요소의 값보다 크면 무슨 일을 하도록 한다.

}


$("#ID 또는 .클래스:last 한 개 또는 태그 요소 하나").offset().top = 333; 

$("#ID 또는 .클래스:eq(0)한 개 또는 태그 요소 하나").offset().left = 333; 

이렇게 값을 넣어서는 처리 할 수 없고 


수치를 바꾸려면 아래처럼 하면 됩니다. 

$("#ID 또는 .클래스:eq(0) 한 개 또는 태그 요소 하나").css("top", 333);

$("#ID 또는 .클래스:last 한 개 또는 태그 요소 하나").css("left", 333);