JQuery

 

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>

 

슬라이드 메뉴

 

 

 

 

 

 

 


                                                                                                           슬라이드 메뉴
                                                                                                

 

 

 

 

about author

PHRASE

Level 60  머나먼나라

만일 위에 있는 사람도 아래에 있는 사람도 모두가 제각기 자기의 이익만 생각하고 행동하게 된다면 그 나라는 위태롭게 된다. 정(征)은 취하는 것. -맹자

댓글 ( 0)

댓글 남기기

작성

JQuery 목록    more