o

jquery를 이용한 오른쪽 퀵메뉴

<div style='position:absolute;'>퀵메뉴 내용</div> 형식이 아닌
 
 
//-----------------------------------
<div style='position:relative or absolute'>
   <div style='position:absolute;'>퀵메뉴 내용</div>
</div>
이동하는 간단 오른쪽 퀵메뉴
//---------------------------------
 
//테스트 예제
<HTML>
 <BODY>
<script src='http://code.jquery.com/jquery-latest.js'〉〈/script〉
<table height='2000'>
<tr>
 <td width='100'>
 </td>
 <td valign=top><BR><BR><BR><BR><BR>
<div style='position:relative'><div style='position:absolute;border:1px solid #ccc;' id='test'>ffffffff</div></div>
 </td>
</tr>
</table>
 
 
<SCRIPT LANGUAGE="JavaScript">
<!--
//테스트 처럼 absolute 어미로 relative , absolute 가 있어야 합니다
var top_y_limit = 0 ;  //오른쪽 이동 레이어 값 정의
var fix_top = 20 ;      //상단에서 어느정도 떨어질것인지 정의
var move_speed = 800;  // 이동 감지 시간 0.8초(너무 짧으면 민감함)
var id_value = 'test';  //아이디 값 정의
jQuery(document).ready(function(){
 //----------------------------------
 //이동 레이어 정의
 var offset = jQuery("#"+id_value).offset();  //레이어 위치 정의
 top_y_limit = offset.top-fix_top;    //항상 상단보다 fix_top 아래에서
 var rightmenu_t = setInterval(rightmenu_move,move_speed); //오른쪽 위아래이동 적용
 //----------------------------------
});
//----------------------------------
//오른쪽 이동 함수를 정의
function rightmenu_move()
{
 var scrolltop = jQuery(window).scrollTop();
 if(scrolltop > top_y_limit){ jQuery("#"+id_value).animate({"top": (parseInt(scrolltop)-parseInt(top_y_limit))+"px"},"slow");}
 else {jQuery("#"+id_value).animate({"top": "0px"},"slow"); }
}
//----------------------------------
//-->
</SCRIPT>
 </BODY>
</HTML>
|

댓글 2개

적용해보겠습니다.
감사합니다.
감사합니다.
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

8,188건
+
제목 글쓴이 날짜 조회
11-10-25 조회 2,505
11-10-18 조회 4,035
11-10-18 조회 2,415
11-10-15 조회 3,637
11-10-10 조회 2,689
11-10-02 조회 2,602
11-09-28 조회 2,420
11-09-24 조회 2,513
11-09-22 조회 2,400
11-09-05 조회 2,886
11-08-31 조회 2,264
11-08-31 조회 2,583
11-08-31 조회 2,429
11-08-29 조회 2,977
11-08-28 조회 2,469
11-08-25 조회 2,530
11-08-17 조회 2,240
11-08-16 조회 2,478
11-08-11 조회 2,930
11-08-07 조회 2,641
11-08-03 조회 2,352
11-07-22 조회 2,095
11-07-12 조회 3,311
11-06-27 조회 2,096
11-06-01 조회 1,758
11-05-17 조회 2,546
11-05-01 조회 2,619
11-04-28 조회 2,905
11-04-28 조회 2,959
11-04-13 조회 2,616
11-03-27 조회 2,743
11-03-27 조회 2,617
11-03-14 조회 2,028
11-03-02 조회 2,353
11-03-02 조회 2,582
11-02-27 조회 3,008
11-02-23 조회 2,392
11-02-19 조회 2,529
11-02-14 조회 4,143
11-02-03 조회 2,935
11-01-24 조회 3,881
11-01-04 조회 2,411
10-12-08 조회 5,423
10-11-15 조회 2,429
10-11-14 조회 2,619
10-11-14 조회 3,635
10-10-29 조회 3,702
10-10-19 조회 2,714
10-10-07 조회 2,537
10-10-05 조회 4,455
10-09-18 조회 2,753
10-09-18 조회 2,496
10-09-17 조회 4,899
10-09-15 조회 2,840
10-09-15 조회 2,370
10-09-15 조회 2,856
10-09-15 조회 2,690
10-09-11 조회 4,019
10-09-11 조회 2,517
10-09-11 조회 2,559
10-09-07 조회 3,835
10-09-07 조회 3,373
10-08-29 조회 2,832
10-07-01 조회 3,079
10-06-30 조회 2,486
10-06-30 조회 2,661
10-06-30 조회 3,012
10-06-13 조회 2,052
10-04-15 조회 3,222
10-04-04 조회 3,453
10-02-23 조회 3,559
10-02-09 조회 3,155
10-01-25 조회 2,667
10-01-25 조회 2,762
09-12-27 조회 4,407
09-11-23 조회 3,632
09-11-20 조회 4,865
09-08-30 조회 3,060
09-08-30 조회 3,055
09-08-12 조회 3,029
09-07-22 조회 4,086
09-07-22 조회 4,737
09-07-15 조회 5,899
09-07-11 조회 2,980
09-06-17 조회 2,718
09-06-15 조회 3,011
09-05-29 조회 3,283
09-05-11 조회 5,923
09-05-08 조회 2,684
09-04-30 조회 3,798
09-04-17 조회 3,121
09-04-04 조회 3,306
09-03-05 조회 3,681
09-02-09 조회 3,653
09-02-03 조회 6,153
08-12-27 조회 3,218
08-12-20 조회 4,305
08-11-21 조회 5,269
08-11-14 조회 2,837
08-11-03 조회 3,299