jq홈페이지위치 (1) 썸네일형 리스트형 자바스크립트 10일차 - 헤더 영역, 마우스휠 조절시 영역 표기, scrollTop, animate를 통한 페이지 위치 옮기기 스크롤을 올릴땐 헤더 영역이 나타났다가 스크롤을 내리면 헤더영역이 사라지는 그런 사이트들을 보신적이 있을꺼에요; 스크롤을 내리면 아래처럼 메뉴가 사라지고. 스크롤을 올리면 아래와 같이 메뉴(머릿말)이 나타나도록 만들어보겠습니다. 먼저 헤더영역을 만들어주시고요. ㅎㅎ header 헤더에 스타일을 줍시다. 백그라운드, 글씨색, 텍스트 위치 등등 조절해주시고요. 중요한점이 헤더의 위치는 고정으로 해야됩니다. (이것만 설정하면 휠을 올렸다 내렸다 하더라도 위치를 고정하고 있답니다.) 그리고 현재는 보이지 않도록 하기 위해 translateY 값을 -100%로 줍니다. 이상태를 주면 헤더는 보이는 페이지 위쪽에 우리눈에 안보이는 곳에 위치하게 됩니다. 그리고 transition 값을 0.5s줍니다. 0.5의 속도.. 이전 1 다음
