스크롤을 따라 다니는 메뉴 소스를 많이 보았을 것 이다.
허나 보통 돌아 다니는 스크립트는 일단 dotype을 선언 했을때 먹통이 되는 스크립트도 많고
간단해 보이는 것이 왜케 소스가 긴 것 인지.. -_-;
지금 설명 하려는 것은 css으로만 해당 기능을 구현 하는 방법 이다.
따라다니는 부드러운 느낌 보다는 고정 되어 있다는 느낌이 드는 것임으로 참고 하자.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> eyes of siche </title> <style type="text/css"> .skydiv { position: fixed; top: 10px; left: 10px; } .skydiv { border: 1px solid #790000; padding: 10px; } </style> <!--[if (IE 6)]> <style type="text/css"> .skydiv { position: absolute; top:expression(documentElement.scrollTop+10); } </style> <![endif]--> </head> <body> <div class="skydiv"> 스크롤을 따라다니는 놈. </div> 1<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 2<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 3<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 4<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 5<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </body> </html> |
일단 IE6.0을 제외한 다른 브라우저는 position: fixed 라는 속성으로 간단히 구현 할수 있다.
그런데 역시나 IE6.0은 다들 아시다시피 꼴통이라 이놈을 인지 하지 못한다.
그래서 넣어 준것이 top:expression(documentElement.scrollTop+10); 이놈.
documentElement.scrollTop 이것이 현재 스크롤의 높이 값을 던져 주고 +10 은
스타일에서 보면 top, left 를 각각 10px 씩 띄었다. 현재 스크롤 값에 10px를 더한 값이 top 속성 값이 되는 것이다.
<!–[if (IE 6)]> 이놈 안에 들어가 있는 소스는 IE6.0 에서만 불러온다.