본문 바로가기

Local Oriented/HTML CSS JS

position fixed 를 사용하여 화면이 스크롤 되어도 고정 위치에 표시

<div style="position:fixed; top:0; right:0">...</div>

상기와 같이 하면 오른쪽 상단에 div 가 놓여진다. 스크롤 하더라도 그 위치가 변함이 없다.

레이어가 있는 화면의 경우 z-index:100 과 같이 값을 주면 되겠고..

그런데, doctype 이 정의되어 있지 않다면 작동하지 않는다.


jquery 와 함께 사용하여 일정한 공간을 스크롤 한 다음에야 표시되게 하고,
일정한 공간이 남은 다음에 표시되지 않게 할 수도 있겠다..
처음엔 나오지 않다가 어느정도 스크롤 하면 나오게 하거나,
반대로.. 처음엔 나오다가 일정한 스크롤이 이루어지면 표시되지 않도록 할 수도 있겠다.


jquery 를 이용해서 일정한 곳으로 애니메이션 스크롤