스크롤 따라다니는 메뉴 ①

스크롤 따라다니는 메뉴 ①

body tag 아래 넣기.


<div id=divMenu style="position:absolute; left:770; top:0">
<!-- 여기에서 배너의 위치와 크기를 설정 하세요-->
<table width="150" height="350" border="0">
<tr>
      <td><a href="http://www.ybmchinese.com" target="_blank" onfocus='this.blur()'><img src="images/c-ban-a2.gif" border=0></a></td>
</tr>
</table>
</div>

<script language=javascript>
<!--
var bNetscape4plus = (navigator.appName == "Netscape" && navigator.appVersion.substring(0,1) >= "4");
var bExplorer4plus = (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.substring(0,1) >= "4");
function CheckUIElements(){
var yMenuFrom, yMenuTo, yButtonFrom, yButtonTo, yOffset, timeoutNextCheck;

if ( bNetscape4plus ) {
yMenuFrom = document["divMenu"].top;
yMenuTo = top.pageYOffset + 62;
}
else if ( bExplorer4plus ) {
yMenuFrom = parseInt (divMenu.style.top, 10);
yMenuTo = document.body.scrollTop + 59;
}

timeoutNextCheck = 500;

if ( Math.abs (yButtonFrom - (yMenuTo + 152)) < 6 && yButtonTo < yButtonFrom ) {
setTimeout ("CheckUIElements()", timeoutNextCheck);
return;
}

if ( yButtonFrom != yButtonTo ) {
yOffset = Math.ceil( Math.abs( yButtonTo - yButtonFrom ) / 10 );
if ( yButtonTo < yButtonFrom )
yOffset = -yOffset;

if ( bNetscape4plus )
document["divLinkButton"].top += yOffset;
else if ( bExplorer4plus )
divLinkButton.style.top = parseInt (divLinkButton.style.top, 10) + yOffset;

timeoutNextCheck = 10;
}
if ( yMenuFrom != yMenuTo ) {
yOffset = Math.ceil( Math.abs( yMenuTo - yMenuFrom ) / 20 );
if ( yMenuTo < yMenuFrom )
yOffset = -yOffset;

if ( bNetscape4plus )
document["divMenu"].top += yOffset;
else if ( bExplorer4plus )
divMenu.style.top = parseInt (divMenu.style.top, 10) + yOffset;

timeoutNextCheck = 10;
}

setTimeout ("CheckUIElements()", timeoutNextCheck);
}

function OnLoad()
{
var y;
if ( top.frames.length )
if ( bNetscape4plus ) {
document["divMenu"].top = top.pageYOffset + 135;
document["divMenu"].visibility = "visible";
}
else if ( bExplorer4plus ) {
divMenu.style.top = document.body.scrollTop + 135;
divMenu.style.visibility = "visible";
}
CheckUIElements();
return true;
}
OnLoad();
//-->
</script>


스크롤 따라다니는 메뉴 ②
[스크립트] 스크롤을 따라다니는 메뉴 만들기  

스크롤을 움직이면 항상 그 위치에서 메뉴가 나타나는 기능입니다.
아래의 내용을 차례대로 넣어보세요.

■ <Head> 와 </Head> 사이에 스크립트를 넣으세요.

<SCRIPT LANGUAGE="JavaScript">
  <!--
     function fix(){
     var a=document.body.scrollTop+190
     bar.style.top = a
     }
  -->
</SCRIPT>


■ <Body> 내용안에 <onScroll="fix()"> 를 넣어주세요.

<body bgcolor="#FFFFFF" text="#000000" onScroll="fix()">


■ <Body> 와 </Body> 사이에 넣으세요.

<span id="bar" style="position:absolute; visibility:visible; left:20px; top:190px; z-index:1; width: 90px; height: 300px">메뉴로 사용할 내용을 넣어주세요</span>







* 움직이는 메뉴. 위에꺼랑 같은건가? 근데 위는 왜케 짧아?

<div id="div_id" style="position:absolute;left:300;">
<table border="1" height="300">
<tr>
<td><form name="srcg"><input name="srcs"><input name="srca"><input name="srcf"></form></td>
</tr>
<tr>
<td align="center" style="cursor:hand" onclick="moving_control()">메뉴on/off</td>
</tr>
</table>
</div>


<script type="text/javascript" language="javascript">
<!--
var scroll_pixel,div_pixel,gtpos,gbpos,loop,moving_spd;
var top_margin = 50;         /// 창의 맨위와의 여백 내려올때
var top_margin2 = 100;      /// 창의 맨위와의 여백 올라올때
var speed = 20;            /// 점차 줄어드는 속도를 위한 설정          
var speed2 = 15;           /// setTimeout을 위한 속도 설정
var moving_stat = 1;      /// 메뉴의 스크롤을 로딩시 on/off설정 1=움직임 0은 멈춤

function check_scrollmove()
{
  scroll_pixel = document.body.scrollTop;
        gtpos = document.body.scrollTop+top_margin;
        gbpos = document.body.scrollTop+top_margin2;
  if(div_id.style.pixelTop < gtpos)
        {
         moving_spd = (gbpos-div_id.style.pixelTop)/speed;
         div_id.style.pixelTop += moving_spd;    
         document.srcg.srcs.value = scroll_pixel;        /// 이부분은 현제 pixel을 보려고 임시 표시한 것입니다.  
         document.srcg.srca.value = moving_spd;          /// 사용할땐 잘라내고 사용하세요
         document.srcg.srcf.value = div_id.style.pixelTop;        /// 요기도요~~~~~~~~~~~~~~~~`
        }
        if(div_id.style.pixelTop > gtpos)
        {
         moving_spd = (div_id.style.pixelTop-gtpos)/speed;
         div_id.style.pixelTop -= moving_spd;
         document.srcg.srcs.value = scroll_pixel;          /// 이부분은 현제 pixel을 보려고 임시 표시한 것입니다.
         document.srcg.srca.value = moving_spd;             /// 사용할땐 잘라내고 사용하세요
         document.srcg.srcf.value = div_id.style.pixelTop;         /// 요기도요~~~~~~~~~~~~~~~~`
        }
        loop = setTimeout("check_scrollmove()",speed2);
}
function moving_control()
{
  if(!moving_stat){ check_scrollmove(); moving_stat = 1;}
        else{ clearTimeout(loop); moving_stat = 0; div_id.style.pixelTop = top_margin;}
}
check_scrollmove();
-->
</script>

'- script' 카테고리의 다른 글

스크롤바  (0) 2010.10.05
요일마다 바뀌는 상태바 인사 말~  (0) 2010.10.05
우리가 사랑한지 몇일째 날짜세주는 PHP 소스  (0) 2010.10.05
input | input내용, 클릭하면 ... 사라져라!  (0) 2010.10.05
제목 박스 앞에 흰점 없애는 방법  (0) 2010.10.05
깔끔한 드롭다운 메뉴  (0) 2010.10.05
클릭시 서브메뉴  (0) 2010.10.05
홈페이지에 머무른 시간을 알림창으로 나타내기.  (0) 2010.10.05
간단한 구조의 슬라이딩 메뉴만들기  (0) 2010.10.05
윈도우 단축키 총 모음  (0) 2010.10.05