스크롤에 영향을 받지 않고 화면에 고정된 레이어 > script

스크롤에 영향을 받지 않고 화면에 고정된 바로가기 메뉴를 말씀하시는것이 맞다면 HTML과 CSS코드만으로 제작된 아래 예제를 한번 봐주세요.

http://naradesign.net/open_content/reference/fixedLayer/index.html
http://naradesign.net/wp/2007/09/08/128/

브라우저가 표준을 적절하게 지원하는 경우 CSS핵이라는 것을 사용하지 않아도 구현이 가능하지만 현재 MS IE 6 브라우저가 position:fixed 속성을 지원하지 않기에 핵을 사용하게 되었고 그럼에도 불구하고 저 예제는 완벽하지 않습니다.

IE6 브라우저에서 브라우저의 창 너비를 줄이는 경우 바로가기 메뉴 영역이 body에 생성된 스크롤바를 덮어버리는 문제가 있었습니다. 따라서 예제의 #aside 영역에 _z-index:-1 속성을 넣어보기도 하는데 그렇게 되면 바로가기 콘텐츠를 클릭하거나 드래그 할 수 없는 또 다른 문제가 발생하는 등 아직까지 마땅한 묘안이 없는 예제라서 실무에 직접 사용하시는 것은 권장드리지 않습니다.

이런 예제도 있다는 정도만 알아두시고 묘안이 생기기 전까지는 그냥 잘 만들어진 자바스크립트 코드를 찾아쓰시는 것을 권장 드립니다.

네이버의 이용약관 페이지 우측에 비슷한 예제가 있습니다. ‘^top’ 이라는 글자가 화면에 고정되어 스크롤의 영향을 받지 않고 있는데요. 참고가 되실런지 모르겠습니다.

http://www.naver.com/rules/service.html

CSS

#content{ background:#eee; width:800px; height:2000px;}
.gotop{position:fixed; _position:absolute; left:50%; top:556px; width:960px; margin-left:-480px; text-align:right; clear:both;}
.gotop a{display:block; float:right; position:relative; right:-22px; padding:6px 1px 2px 1px; font:10px Verdana; color:#666; background:url(http://wstatic.naver.com/rules/r8/bu_arrow3.gif) no-repeat 6px 2px;}


HTML

<div id="content">#content</div>
<div id="gotop" class="gotop">
<a href="#wrap">top</a>
</div>
<script type="text/javascript" src="http://www.naver.com/rules/js/namespace.js"></script>
<script type="text/javascript" src="http://www.naver.com/rules/js/NaverGuideSupport.js"></script>
<script type="text/javascript">
nhn.setup(500,"gotop")
nhn.goTopEvt();
</script>


예제에 인용된 img, js 파일을 실무에서 직접 링크하는 것은 네이버의 자원을 부적절하게 사용하는 방법이므로 피해주실 것을 부탁 드립니다. 감사합니다.