jQuery 강좌3. 스크롤바 따라다니는 슬라이드 메뉴
웹눈님의 블로그에서 배운내용 입니다 jquery를 배우실분은 위 링크를 클릭하십시오
모든 게시글 오른쪽 마우스 열어 놓았읍니다만
드레그해서 가져가면 남는것 아무것도 없읍니다
수동으로 코딩 하십시오
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="UTF-8">
<!--link rel="stylesheet" type="text/css" href="jquery.css"-->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
/*$(document).ready(function(){
var currentPosition = parseInt($("#slidemenu").css("top"));
$(window).scroll(function() {
var position = $(window).scrollTop();
$("#slidemenu").stop().animate({"top":position+currentPosition+"px"},1000);
});
});*/
$(document).ready(function(){
var currentPosition = parseInt($("#slidemenu").css("top"));
$(window).scroll(function() {
var position = $(window).scrollTop(); // 현재 스크롤바의 위치값을 반환합니다.
$("#slidemenu").stop().animate({"top":position+currentPosition+"px"},500);
});
});
</script>
<style type="text/css">
body{text-align:center;}
#wrap{text-align:left;margin: 0 auto;width: 600px;}
#slidemenu{background:#12cf3d;position:absolute;width:100px;top:400px;right: 10px;}
</style>
<!--<style type="text/css">
body{text-align:center;}
#wrap{text-align:left;margin:0 auto;width:600px;}
#slidemenu{background:#12cf3d;position:absolute;width:100px;top:50px;right:10px;}
</style>-->
</head>
<body>
<h1>강좌3 - 스크롤바를 따라다니는 메뉴 만들기</h1>
<div id="wrap">
이<br />렇<br />게<br /> 하<br />면<br /> 스<br />크<br />롤<br />바<br />를<br /> 따<br />라<br /> 다<br />닌<br />다<br />는<br />데<br />?<br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div id="slidemenu">
<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>
<li><a href="#">menu6</a></li>
<li><a href="#" id="top1" title="▲ 위로이동">위로</a></li>
</ul>
</div>
</body>
</html>
'my_lesson > _JQuery' 카테고리의 다른 글
| JavaScript [document object] 문서 속성 보기 , 팝업창 열기 (0) | 2015.04.11 |
|---|---|
| JQuery [animate, addClass, html] (0) | 2015.04.11 |
| JQuery [floatMenu,decoration]스크롤을 따라 움직이는 플로팅 메뉴 (0) | 2013.08.16 |
| JQuery [click, toggle] 펼침메뉴 만들기 (0) | 2013.08.16 |
| JQuery [hide]클릭하면 사라지는 jquery (0) | 2013.08.16 |
댓글