Programming/jQuery

[jQuery 실전] 스크롤 했을 때 상단에 고정되는 헤더

웹사이트를 이용할 때 스크롤을 아래로 내리면 상단에 고정되어 따라오는 헤더들이 있다. 스크롤을 아래로 내렸다가 메뉴를 클릭하기위해 다시 상단으로 올라오는 것이 불편하기 때문에 사용자의 편의성을 위해 자주 사용된다. 이 헤더를 만들기 위해서 알아야하는 값은 사용자가 내린 윈도우 스크롤의 양 화면상단에서 요소(헤더)까지의 거리 두 가지로, 윈도우 스크롤 양과 헤더까지의 거리를 비교하는 조건문을 이용해 윈도우 스크롤 양 >= 상단에서 헤더까지의 거리가 되었을 때, 헤더를 상단에 고정시키는 (position:fixed) 클래스를 추가하고 아닐 때, 클래스를 제거해준다. (1) 윈도우 스크롤의 양 확인하는 방법 윈도우의 스크롤 양을 파악하는 것은 스크롤바의 수직 위치를 가져오는 .scrollTop() 메서드를 이..

jQuery 기본 (특징, 선택자, 흐름)

jQuery는 2006년 존 레식이 처음으로 공개한 자바스크립트 라이브러리이다. HTML 문서의 탐색과 조작, 이벤트 핸들링, 애니메이션, Ajax 등을 멀티브라우저를 지원하는 API를 통해 더욱 간편하게 사용할 수 있다. - 라이브러리 : 자주 사용하는 기능과 효과를 Javascript 코드로 미리 만들어두고 재활용할 수 있게 모아둔 것. - Ajax : JavaScript의 라이브러리 중 하나이며 Asynchronous Javascript And Xml (비동기식 자바스크립트와 xml)의 약자이다. JavaScript를 사용한 비동기 통식, 클라이언트와 서버간에 XML 데이터를 주고받는 기술. 즉, 자바스크립트를 통해 서버에 데이터를 요청하는 것. jQuery 특징 문법이 간결하다. CSS 스타일의 ..