[jQuery] 요소의 크기조회, 반응형 기능

요소의 크기 조회

---

width(), height() 함수의 사용

특정 요소의 크기

var w = $("#foo").width();
var h = $("#foo").height();

웹 페이지 전체의 크기

var w = $(document).width();
var h = $(document).height();

브라우저의 크기

var w = $(window).width();
var h = $(window).height();

스크롤바의 위치

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

반응형 기능

- 브라우저 크기에 반응하여 동작하는 함수를 정의하고 브라우저가 열린 직후와 창 크기가 변경될 때 동작하도록 호출한다.

function responsive() {
    // 현재 창의 넓이
    var w = $(window).width();
 
    if(w >= ?){
        // ... 반응형 기능 구현 ...
    }
}
 
$(function(){
    // 브라우저가 열린 직후
    responsive();
 
    $(window).resize(function(){
        // 창 크기가 변경될 경우
        responsive();
    });
});

인피니티 스크롤

//jQuery의 load처리 안에서 정의
$(funcion(){
    $(window).scroll(function(){
        if( $(window).scrollTop() + $(window).height() >= $(document).height() -15 ){
            // >= 처리는 아이폰을 위한 처리
            // - 15는 브라우저의 상태 표시줄
            //... 스크롤이 맨 밑에 도착한 경우의 처리
        }
    });
});