절대 좌표/상대 좌표 구하기

 

// 상대 좌표 구하기
let element1 = document.querySelector('.box1');
let elementTop1 = element1.getBoundingClientRect().top;
console.log(elementTop1);

 

 

// 절대 좌표 구하기
let element2 = document.querySelector('.box1');
let elementTop2 = window.pageYOffset + element2.getBoundingClientRect().top;
console.log(elementTop2) // 1000

 

// 다른 요소로부터 좌표 구하기
let element3 = document.querySelector('.box1');
let target = document.querySelector('.box2');
let elementTop3 = window.pageYOffset + element3.getBoundingClientRect().top;
let targetTop = window.pageYOffset + target.getBoundingClientRect().top;
console.log(targetTop - elementTop3);

 

//jQuery
// 절대 좌표 구하기
let position1 = $('.box1').offset().top;
console.log(position1);

 

// 상대 좌표 구하기
let position2 = $(window).scrollTop();
console.log(position1 - position2);

 

// 다른 요소로부터 좌표 구하기
let position3 = $('.box2').offset().top - $('.box1').offset().top;
console.log(position3);