669
No
scroll.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script
src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(function(){
// 슬라이드 메뉴의 현재 좌표값
currentPosition=parseInt( $("#slidemenu").css("top"));
$(window).scroll(function(){ //스크롤 이벤트
//스크롤 상태에서의 top 좌표값
position=$(window).scrollTop();
//1초동안 애니메이션 실행(top 좌표 변경)
$("#slidemenu").stop().animate(
{"top":position+currentPosition+"px"},1000);
});
});
</script>
<style>
#slidemenu {
background: #12cf3d;
position: absolute; /* 절대좌표 */
/* position: fixed; */ /* 스크롤에 관계없이 좌표 유지 */
width: 200px;
top: 50px;
right: 10px;
}
</style>
</head>
<body>
<h3>슬라이드 메뉴</h3>
<div id="text">
<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">
슬라이드 메뉴<br>
<img src="../images/tomato.jpg"
width="200" height="200">
</div>
</body>
</html>
슬라이드 메뉴
슬라이드 메뉴
|
scroll2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-3.2.1.min.js" ></script>
<script>
$(function(){
currentBottom=parseInt($("#slidemenu").css("top"));
$(window).scroll(function(){ //스크롤 이벤트
//스크롤 상태에서의 Top 좌표값
position=$(window).scrollTop();
bottomPosition = $(window).scrollTop() + $(window).height();
//1초동안 애니메이션 실행(top 좌표 변경)
$("#slidemenu").stop().animate(
{"bottom":currentBottom -position-500+"px"},1000);
});
});
</script>
<style>
#slidemenu {
background: #12cf3d;
position: absolute; /* 절대좌표 */
/* position: fixed; */ /* 스크롤에 관계없이 좌표 유지 */
width: 200px;
bottom: 50px;
right: 10px;
}
</style>
</head>
<body>
<h3>슬라이드 메뉴</h3>
<div id="text">
<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">
슬라이드 메뉴<br>
<img src="../images/tomato.jpg"
width="200" height="200">
</div>
</body>
</html>
슬라이드 메뉴
|
댓글 ( 4)
댓글 남기기