Quick Menu(flying menu) in jQuery / 제이쿼리로 퀵메뉴 바 만들기 

	

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<title>scroll_menu</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style>
 .wrap {width:1000px; height:3000px; background-color:#cdcdcd; margin:0 auto;}
 #q_menu {width:80px; height:300px; border: 1px solid #000; position: absolute; margin-left: 1000px; margin-top: 150px;}
 #textDiv {position: absolute;}
</style>
<script type="text/javascript">
$(document).ready( function(){
 $('#q_menu').animate({'top':$(document).scrollTop()+20+'px'},500);//처음시작하는위치
 $(window).scroll(function(){
  $('#q_menu').stop();
  $('#q_menu').animate({'top':$(document).scrollTop()+20+'px'},1000);
 });
 
});
</script>
</head>
<body>   
 <div class="wrap">test
  <div id="q_menu">quick menu</div>
 </div>
</body>
</html>
----------------------------------------------------------------------------------

//애니메이션 효과 없이 그냥 항상 그 자리에 붙여두는 방법

<script type="text/javascript">
$(document).ready( function(){
 $(window).scroll(function(){
 var getTop = $(this).scrollTop();
 $('#q_menu').css('top',getTop+'px');
 });
</script>

댓글

댓글 쓰기

이 블로그의 인기 게시물

Lottery in javascript / 자바스크립트로 경품추첨기 만들기

<style> body{font-size:9pt;} #panel{border:1px #000000 solid; line-height:400px; font-size:100px; width:400px; height:400px; text-align:center; vertical-align:middle;} </style> <script> var panel; var nTimerID; var labTotal; var nTotalMember; window.onload=function(){ this.init();// 요소 초기화 실행. this.initEventListener();// 이벤트 초기화 실행. } function init(){// 요소 초기화. this.panel = document.getElementById("panel");// 숫자가 출력될 #panel을 찾아 전역변수에 담아둡니다. this.nTimerID = 0;// 참여인원 정보가 입력된 패널을 찾아 전역변수에 담아둡니다. this.labTotal = document.getElementById("lab_total"); this.nTotalMember = 0; } function initEventListener(){// 이벤트 초기화. var btnStart = document.getElementById("btn_start"); btnStart.addEventListener("click", function(){ startTimer(); },false); var btnStop = document.getElementById("btn_stop"); btnStop.addEventListener("click...
자세한 내용 보기

document.forms object in javascript / 자바 스크립트의 폼 객체

forms 객체는 links, images 등과 같은 배열 형태로 document 객체의 하단에 존재하는 객체이다. forms[ ] 배열 폼의 구성 요소와 마찬가지로 폼 자체도 배열로 참조되어질 수 있다. 배열의 순서는 구성 요소의 순서와 마찬가지로 HTML 내에서 기술된 순서대로 0번부터 참조되어지며, 그 형식은 document.forms[0]과 같은 방식으로 참조된다. 물론 배열로 참조된 폼 내의 구성 요소 참조시에도 elements[] 배열을 사용할 수 있다. 즉, HTML내에서 기술된 두 번째 폼에서 세 번째 구성 요소를 참조하고자 한다면 document.forms[1].elements[2]와 같이 하면 참조가 가능하다. form에서 사용되는 각 양식들의 이름(name )을 정의해 준다면, 이들을 모두 자바스크립트에서 쉽게 접근할 수 있다. 만약, 이름을 정의해 주지 않는다면 아래와 같이 참조할 수 있다. ...... <form> →document.forms[0] <input type=text value='Text1'> →document.forms[0].elements[0] <input type=text value='Text2'> →document.forms[0].elements[1] <input type=submit> </form> <form> →document.forms[1] <input type=text value='Text1'> →document.forms[1].elements[0] <input type=text value='Text2'> →document.forms[1].elements[1] <input type=submit> </form> ...... form 태그에도 아래와 같이 이름을 정의해 줄 수 있다. 이름...
자세한 내용 보기

Accordion Menu in jQuery / 제이쿼리로 아코디언 메뉴 만들기

<div class="menu">menu01</div> <ul class="accordion"> <li>list01</li> <li>list02</li> <li>list03</li> </ul> <div class="menu">menu02</div> <ul class="accordion"> <li>list01</li> <li>list02</li> <li>list03</li> </ul> <style> .accordion {display:none;} .menu.on {color:red;} </style> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script> $(document).ready(function(){ /*메뉴 아코디언*/   $('.accordion').hide();   $('.menu').click(function(){ $(this).toggleClass('on')         $(this).next().slideToggle();   }); }); </script>
자세한 내용 보기