코딩룸*◡*

[jquery]offset 본문

공부좀 하자/jQuery

[jquery]offset

코딩하는 묭이💛 2017. 11. 27. 17:35

1. 절대좌표(전역좌표) offset

offset 메소드는 요소의 위치정보를 가져온다.
전역 좌표(절대 좌표)라고도 하는데, 최상위 노드인 Document의 left:0; top:0; 위치를 시작점으로 하는 위치값을 의미한다.
반응형 또는 모바일 환경에서 하단 또는 특정 위치에 고정된 값을 가지며 따라다니는 것들을 구현하기 위해 좌표값이 필요한데, offset이 해당 위치값을 알거나 또는 이동할 수 있는 함수이다.



2.  offset().top  //  offset().left

1) .offset().top // 상단을 기준으로 엘리먼트 요소가 위치한 거리를 절대좌표로 반환

2) .offset().left// 좌측을 기준으로 엘리먼트 요소가 위치한 거리를 절대좌표로 반환


 <!DOCTYPE html>

<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("button").click(function(){

        var x = $("p").offset();

        alert("Top: " + x.top + " Left: " + x.left);

    });

});

</script>

</head>

<body>


<p>This is a paragraph.</p>


<button>Return the offset coordinates of the p element</button>


</body>

</html>


[예제사이트로 바로가기]




_Page.story.scroll.textChecked = function (item) {

var elementTop = $(item).offset().top;

var elementBottom = elementTop + $(item).outerHeight();


var viewportTop = $(window).scrollTop();

var viewportBottom = viewportTop + $(window).height();


return elementTop < viewportBottom;

};

_Page.story.scroll.imageChecked = function (item) {

var elementTop = $(item).offset().top;

var elementBottom = elementTop + $(item).outerHeight();


var viewportTop = $(window).scrollTop();

var viewportBottom = viewportTop + $(window).height();


return viewportTop > elementTop && elementBottom > viewportBottom;

};

_Page.story.scroll.crossChecked = function (item) {

var elementTop = $(item).offset().top;

var elementBottom = elementTop + $(item).outerHeight();


var viewportTop = $(window).scrollTop();

var viewportBottom = viewportTop + $(window).height();


return viewportBottom > elementTop && viewportTop < elementBottom;

}; 





3. 상대좌표(지역좌표) position

position은 offset과 달리 부모요소의 위치를 기준으로 값을 얻는 상대좌표(지역좌표) 함수이다.
부모요소를 기준으로 원하는 요소의 상대적인 위치값을 얻어낼 수 있다.


 <!DOCTYPE html>

<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("button").click(function(){

        var x = $("p").position();

        alert("Top position: " + x.top + " Left position: " + x.left);

    });

});

</script>

</head>

<body>


<p>This is a paragraph.</p>

<button>Return the top and left position of the p element</button>


</body>

</html>


[예제사이트로 바로가기]

반응형

'공부좀 하자 > jQuery' 카테고리의 다른 글

마우스휠 바  (0) 2017.09.18
마우스 휠 한번에 한 영역씩 이동하기  (0) 2017.09.14
[jQuery]화면 크기에 따라 이미지 변경  (0) 2017.08.23
슬라이드 배너  (0) 2017.07.26
.on('click') 과 .click()의 차이점  (0) 2017.07.10
'공부좀 하자/jQuery' Related Articles more
Comments