스클롤을 따라다니는 플로팅 메뉴는 검색을 해보시면 많이 있는것을 알수 있을겁니다.
각자의 환경에 맞쳐서 사용하시면 됩니다.
제가 소개하는 floating menu 는 jquery 를 사용하는 메뉴입니다.
참고로 jquery 를 사용하면 정말 많은 효과를 줄수 있습니다.
그리고 소개하는 플로팅 메뉴는 크로스 브라우징 환경에 있어 모든 브라우져에서 정상작동합니다. 

예제 페이지를 참고하세요.
스크롤을 내렸다 올렸다 해보세요.

제 블로그에 적용되어 있는것입니다. 현재 우측에 따라다니는 메뉴가 보이지요?


이제 적용하는 법을 알려드리겠습니다.

플로팅메뉴(floating menu) 적용하는 법

아래의 파일을 스킨편집메뉴에서 파일올리기로 업로드 해주세요.




그다음 아래의 코드를 <head> 와 </head> 사이에 넣으세요.
!! 치환자의 경우 ##_치환자_## 는 #\#_치환자_## 로 표시됩니다.!!
<script src="./images/jquery_mini.js" type="text/javascript"></script>
<script src="./images/jquery.dimensions.js" type="text/javascript"></script>
<!-- 스크롤 -->
<script type="text/javascript">
// <![CDATA[
	var name = "#floatMenu";
	var menuYloc = null;
	
		$(document).ready(function(){
			menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
			$(window).scroll(function () { 
				offset = menuYloc+$(document).scrollTop()+"px";
				$(name).animate({top:offset},{duration:500,queue:false});
			});
		}); 
// ]]>
</script> 
이제 사용할 준비가 끝났습니다.
아래 html 코드를 아무곳에나 넣으시면 됩니다.

참고로 이 코드는 페이지가 모두 로딩 된다음에 로딩이 되어도 상관이 없기때문에 html 순서상 아래쪽에 삽입하는것이 좋습니다.
저의 경우 맨 아래 footer 바로위에 삽입하였습니다.

!! 치환자의 경우 ##_치환자_## 는 #\#_치환자_## 로 표시됩니다.!!
<!-- floating menu -->
<div id="floatMenu">
	<ul>
		<li><a href="#">menu1</a></li>
		<li><a href="#">menu2</a></li>
		<li><a href="#">menu3</a></li>
		<li><a href="#">menu4</a></li>
		<li><a href="#">menu5</a></li>
	</ul>
</div>
<!-- //floatMenu -->
 
마지막 css 설정만 남았습니다.
다른것은 적절이 수정하시면 되나 아래 알려드리는것은 많이 수정하시면 안됩니다.

/* #floatMenu */
#floatMenu{
text-align:left;
position:absolute;
width:40px;
top:200px;
right:10px;
padding:0;
margin:0;
z-index:1000;
}
코드를 보시면 position 속성이 가장 중요합니다. 이것이 다른것을 바뀔경우 이상하게 보일수 있습니다.
그 다음은 a 에 해당하는 설정입니다.
#floatMenu a{
text-decoration:none;
display:block;
}
이제 끝입니다.
적절하게 a 에 해당하는 부분에 padding(여백) 이나 color(글자색) 등을 설정해서 사용하시면 됩니다.

저처럼 위로이동, 아래로이동과 함께 링크를 추가하고 싶으신분은 아래 링크를 참고해주세요.