[HTML5 Solution] 떠있는 레이어 만들기 with jquery

딱히 HTML5 와 밀접한 관계는 아니지만,

지금당장 사용가능하며, HTML5 가 범용적으로 바뀌었을때도 사용할 수 있는 코드를 생각하며 어딘가에서 보고 (펌) 약간수정했습니다.

*. 코드이해를 위한 최소의 지식

1. html 태그이해

2. javascript 이해

3. jquery 이해

*. 방향성

1. 현재 가장 많이 쓰이는 브라우저에서도 적용가능해야한다. ( 특히 IE8 슬프지만 현재 우리나라 80%를 점유하는 브라우저이니까-_- )

2. html5 를 기본으로 하되, 역시 현브라우저 구동 가능한 소스가 쵝오

3. 가능하면 크로스 브라우징을 생각함

4. 단순함이 제일

<!doctype html> <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" > </script> <script type="text/javascript"> $(document).ready(function() { var currentPosition = parseInt( $(".float").css("top")); $(window).scroll(function() { var position = $(window).scrollTop(); $(".float").stop().animate ({"top":position+currentPosition+"px"},1000); }); }); </script> <style> .float{position:absolute; top:20px; left:100px;} </style> </head> <body> <div class="float"> 내용 </div> <p>a</p> //적당히 태그를 반복하여 플로팅 레이어를 볼수 있게 만듭니다. <p>a</p> </body> </html>

실제 파일 참조~

test_floatLayer_withJquery.html