웹솔루션개발 25년 노하우! 해피CGI의 모든것

다운로드 받은 파일의 압축을 해제한 뒤 index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 웹페이지에서 스크롤을 내리다 보면 위 그림 처럼 스크롤을 따라다니는 메뉴가 상단에 붙어서 현재 보고 있는 위치가 어디인지를 표시해주게 됩니다. 사용방법은 아래와 같습니다.

모바일용 웹페이지를 제작할 때 상단 부분에 세줄(햄버거)이 화면을 스크롤(스와이프) 할때 숨기거나, 표시해주는 jQuery 플러그인입니다. 스크롤을 내려보면 상단에 세줄 모양의 바가 화면 스크롤을 따라서 내려오거나, 스크롤을 빠르게 내리는 경우 상단의 바가 화면에서 사라집니다. 햄거버 모양의 아이콘 외에 로고, 그 외의 아이콘 들이 추가된 예제입니다. 햄버거바를 클릭하면 메뉴 화면이 열리면서 햄버거 모양의 아이콘이 닫기를 의미하는 아이콘으로 변경시 에니메이션을 주는 예제입니다. 그 외에도 햄버거 바의 위치를 좌에서 우로 조절을 한다거나, 로고를 포함한다거나, 아래 그림 처럼 검색폼이 포함된 예제가 있습니다.

ie에서도 position sticky를 이용할수 있는 소스입니다. 지정된 영역에부터 고정되어 스크롤되어 내려옵니다. 사용법은 간단하며 아래와같이 상단에 스크립트를 지정 /* position:sticky 고정 */ $(function() { Stickyfill.add($('.sticky')); }); 를 이용하여 사용하실 수 있습니다. 아래의 링크를 통해서 실행 데모를 확인하실 수 있습니다. http://wilddeer.github.io/stickyfill/test/