스크롤 따라다니는 레이어
2009.01.20 14:29
5811
0
이온디
첨부파일
https://imweb.eond.com/coding/163998 
<style>
#STATICMENU
{
position:absolute;
left:expression((document.body.clientWidth-this.style.width)/2-this.getAttribute("pos"));
}
</style>
<!--가운데값 계산끝//-->
<script language="javascript">
<!--
var stmnGAP1 = 150; // 페이지 헤더부분의 여백 (이보다 위로는 올라가지 않음)
var stmnGAP2 = 10; // 스크롤시 브라우저 상단과 약간 띄움. 필요없으면 0으로 세팅
var stmnBASE = 200; // 스크롤메뉴 초기 시작위치 (아무렇게나 해도 상관은 없지만 stmnGAP1과 약간 차이를 주는게 보기 좋음)
var stmnActivateSpeed = 200; // 움직임을 감지하는 속도 (숫자가 클수록 늦게 알아차림)
var stmnScrollSpeed = 10; // 스크롤되는 속도 (클수록 늦게 움직임)
var stmnTimer;
// 쿠키 읽기
function ReadCookie(name)
{
var label = name + "=";
var labelLen = label.length;
var cLen = document.cookie.length;
var i = 0;
while (i < cLen) {
var j = i + labelLen;
if (document.cookie.substring(i, j) == label) {
var cEnd = document.cookie.indexOf(";", j);
if (cEnd == -1) cEnd = document.cookie.length;
return unescape(document.cookie.substring(j, cEnd));
}
i++;
}
return "";
}
// 쿠키 저장
function SaveCookie(name, value, expire)
{
var eDate = new Date();
eDate.setDate(eDate.getDate() + expire);
document.cookie = name + "=" + value + "; expires=" + eDate.toGMTString()+ "; path=/";
}
// 스크롤 메뉴의 위치 갱신
function RefreshStaticMenu()
{
var stmnStartPoint, stmnEndPoint, stmnRefreshTimer;
stmnStartPoint = parseInt(STATICMENU.style.top, 10);
stmnEndPoint = document.body.scrollTop + stmnGAP2;
if (stmnEndPoint < stmnGAP1) stmnEndPoint = stmnGAP1;
stmnRefreshTimer = stmnActivateSpeed;
if ( stmnStartPoint != stmnEndPoint ) {
stmnScrollAmount = Math.ceil( Math.abs( stmnEndPoint - stmnStartPoint ) / 15 );
STATICMENU.style.top = parseInt(STATICMENU.style.top, 10) + ( ( stmnEndPoint<stmnStartPoint ) ? -stmnScrollAmount : stmnScrollAmount );
stmnRefreshTimer = stmnScrollSpeed;
}
stmnTimer = setTimeout ("RefreshStaticMenu();", stmnRefreshTimer);
}
// 메뉴 ON/OFF 하기
function ToggleAnimate()
{
if (ANIMATE.checked) { // 이동하기 버튼이 체크되었다면
RefreshStaticMenu(); // 메뉴위치를 다시 조정
SaveCookie("ANIMATE", "true", 300); // 이동이 ON 상태라고 쿠키를 설정
}
else { // 아니라면... (이동하기 버튼이 체크되어 있지 않으면)
clearTimeout(stmnTimer); // 이동용 타이머 해제
STATICMENU.style.top = stmnGAP1; // 메뉴의 위치를 상단으로 옮긴다.
SaveCookie("ANIMATE", "false", 300); // 이동상태가 "OFF" 임
}
}
// 메뉴 초기화
function InitializeStaticMenu()
{
if (ReadCookie("ANIMATE") == "false") { // 이동상태가 off 상태라면
ANIMATE.checked = false; // 체크표시를 지우고
STATICMENU.style.top = document.body.scrollTop + stmnGAP1; // 맨 위에 들러 붙는다.
}
else { // 이동 on 상태라면
ANIMATE.checked = true; // 체크표시를 하고
STATICMENU.style.top = document.body.scrollTop + stmnBASE; // 기본위치로 이동한다.
RefreshStaticMenu(); // 스크립트 가동
}
}
-->
</script>
엔지오식 좌측이동메뉴 레이어 가운데기준정렬
<!-- 스크롤메뉴를 위한 구성입니다. -->
<div id="STATICMENU" pos=390>
<!--pos 부분에 숫자값이 위치를 정하는 부분입니다... 가운데를 0으로 하여 왼쪽은 +값, 오른쪽은 -값으로 설정하시면 됩니다//-->
<!-- 메뉴가 들어갈 부분... 본인의 홈페이지에 맞게 적당히 편집하세요. -->
<table cellpadding="0" cellspacing="0" border="1" style="background:#cccccc; width:190px;">
<tr>
<td style="font-weight:bold; text-align:center;">메뉴가 여기 들어간다고라라라<br>메뉴메뉴<br><br>메뉴메뉴<br><br>메뉴가 여기 들어간다고라라라<br>메뉴메뉴<br><br>메뉴메뉴<br><br></td>
</tr>
<tr>
<td>자유게시판</td>
</tr>
</table>
<!-- 메뉴부분 끝 -->
<!-- 애니메이션 유무를 체크하는 부분 -->
<input id="ANIMATE" type="checkbox" onclick="ToggleAnimate();"> Animate
<!-- 스크롤메뉴를 가동하는 자바스크립트 -->
<script language="javascript">InitializeStaticMenu();</script>
</div>
<!-- 스크롤 메뉴 정의 끝 -->
#STATICMENU
{
position:absolute;
left:expression((document.body.clientWidth-this.style.width)/2-this.getAttribute("pos"));
}
</style>
<!--가운데값 계산끝//-->
<script language="javascript">
<!--
var stmnGAP1 = 150; // 페이지 헤더부분의 여백 (이보다 위로는 올라가지 않음)
var stmnGAP2 = 10; // 스크롤시 브라우저 상단과 약간 띄움. 필요없으면 0으로 세팅
var stmnBASE = 200; // 스크롤메뉴 초기 시작위치 (아무렇게나 해도 상관은 없지만 stmnGAP1과 약간 차이를 주는게 보기 좋음)
var stmnActivateSpeed = 200; // 움직임을 감지하는 속도 (숫자가 클수록 늦게 알아차림)
var stmnScrollSpeed = 10; // 스크롤되는 속도 (클수록 늦게 움직임)
var stmnTimer;
// 쿠키 읽기
function ReadCookie(name)
{
var label = name + "=";
var labelLen = label.length;
var cLen = document.cookie.length;
var i = 0;
while (i < cLen) {
var j = i + labelLen;
if (document.cookie.substring(i, j) == label) {
var cEnd = document.cookie.indexOf(";", j);
if (cEnd == -1) cEnd = document.cookie.length;
return unescape(document.cookie.substring(j, cEnd));
}
i++;
}
return "";
}
// 쿠키 저장
function SaveCookie(name, value, expire)
{
var eDate = new Date();
eDate.setDate(eDate.getDate() + expire);
document.cookie = name + "=" + value + "; expires=" + eDate.toGMTString()+ "; path=/";
}
// 스크롤 메뉴의 위치 갱신
function RefreshStaticMenu()
{
var stmnStartPoint, stmnEndPoint, stmnRefreshTimer;
stmnStartPoint = parseInt(STATICMENU.style.top, 10);
stmnEndPoint = document.body.scrollTop + stmnGAP2;
if (stmnEndPoint < stmnGAP1) stmnEndPoint = stmnGAP1;
stmnRefreshTimer = stmnActivateSpeed;
if ( stmnStartPoint != stmnEndPoint ) {
stmnScrollAmount = Math.ceil( Math.abs( stmnEndPoint - stmnStartPoint ) / 15 );
STATICMENU.style.top = parseInt(STATICMENU.style.top, 10) + ( ( stmnEndPoint<stmnStartPoint ) ? -stmnScrollAmount : stmnScrollAmount );
stmnRefreshTimer = stmnScrollSpeed;
}
stmnTimer = setTimeout ("RefreshStaticMenu();", stmnRefreshTimer);
}
// 메뉴 ON/OFF 하기
function ToggleAnimate()
{
if (ANIMATE.checked) { // 이동하기 버튼이 체크되었다면
RefreshStaticMenu(); // 메뉴위치를 다시 조정
SaveCookie("ANIMATE", "true", 300); // 이동이 ON 상태라고 쿠키를 설정
}
else { // 아니라면... (이동하기 버튼이 체크되어 있지 않으면)
clearTimeout(stmnTimer); // 이동용 타이머 해제
STATICMENU.style.top = stmnGAP1; // 메뉴의 위치를 상단으로 옮긴다.
SaveCookie("ANIMATE", "false", 300); // 이동상태가 "OFF" 임
}
}
// 메뉴 초기화
function InitializeStaticMenu()
{
if (ReadCookie("ANIMATE") == "false") { // 이동상태가 off 상태라면
ANIMATE.checked = false; // 체크표시를 지우고
STATICMENU.style.top = document.body.scrollTop + stmnGAP1; // 맨 위에 들러 붙는다.
}
else { // 이동 on 상태라면
ANIMATE.checked = true; // 체크표시를 하고
STATICMENU.style.top = document.body.scrollTop + stmnBASE; // 기본위치로 이동한다.
RefreshStaticMenu(); // 스크립트 가동
}
}
-->
</script>
엔지오식 좌측이동메뉴 레이어 가운데기준정렬
<!-- 스크롤메뉴를 위한 구성입니다. -->
<div id="STATICMENU" pos=390>
<!--pos 부분에 숫자값이 위치를 정하는 부분입니다... 가운데를 0으로 하여 왼쪽은 +값, 오른쪽은 -값으로 설정하시면 됩니다//-->
<!-- 메뉴가 들어갈 부분... 본인의 홈페이지에 맞게 적당히 편집하세요. -->
<table cellpadding="0" cellspacing="0" border="1" style="background:#cccccc; width:190px;">
<tr>
<td style="font-weight:bold; text-align:center;">메뉴가 여기 들어간다고라라라<br>메뉴메뉴<br><br>메뉴메뉴<br><br>메뉴가 여기 들어간다고라라라<br>메뉴메뉴<br><br>메뉴메뉴<br><br></td>
</tr>
<tr>
<td>자유게시판</td>
</tr>
</table>
<!-- 메뉴부분 끝 -->
<!-- 애니메이션 유무를 체크하는 부분 -->
<input id="ANIMATE" type="checkbox" onclick="ToggleAnimate();"> Animate
<!-- 스크롤메뉴를 가동하는 자바스크립트 -->
<script language="javascript">InitializeStaticMenu();</script>
</div>
<!-- 스크롤 메뉴 정의 끝 -->
글목록
코멘트 0
접기/펴기 | 댓글 새로고침
정말 이 글을 삭제하실건가요? -_-...
닫기
이온디
"스크롤 따라다니는 레이어"
"스크롤 따라다니는 레이어"
Total 235 articles in 4 / 12 pages
| 제목 |
날짜 |
|---|---|---|
 | 코딩 배울 수 있는 사이트 모음(HTML/CSS/JS/IMG/PHP) | 2018/01/03 |
|
| jQuery를 배울수 있는 동네들입니다. | 2013/08/09 |
|
| 관련 링크 [1] | 2010/05/23 |
| 175 | [PHP] 사이트 테마 기능 구현하기 [1] | 2007/04/18 |
| 174 | [Script] DIV 레이어 토글 [1] | 2007/04/21 |
| 173 | [Script] PNG 알파 필터 사용하기 [1] | 2007/04/21 |
| 172 | [Script] 최소/최대화 버튼 없는 군더더기 없는 새창 띄우기 | 2007/04/22 |
| 171 | [Script] 스위칭 탭 | 2007/08/19 |
| 170 | [HTML5] pre 태그랑 xmp 태그의 차이점 [1] | 2007/08/20 |
| 169 | [미분류] 태터에 제로보드 넣기 & Next, Prev 버튼 감추기 (by SkyRejoice) | 2007/08/27 |
| 168 | [Script] 레이어를 이용한 서브 메뉴 | 2007/09/10 |
| 167 | [Script] onload="allblur()" | 2007/11/10 |
| 166 | [Script] 입력폼에 배경 넣기 | 2008/12/22 |
| 165 |
Table to DIV
[5]
| 2008/12/25 |
| 164 |
구글 인덱스 코드
| 2008/12/25 |
| 163 |
CSS 강좌 2일차 : display : inline(혹은 block, none)
| 2008/12/27 |
| 162 | [DIV] 이미지 없이 CSS로 둥근 모서리 구현하기 [1] | 2008/12/31 |
| 161 | Rounded corners without images [1] | 2008/12/31 |
| 160 | 이미지 없이 CSS로 둥근 모서리 구현하기(1) | 2008/12/31 |
| 159 | Rounded Corners | 2008/12/31 |
| 158 | 크로스브라우징 팁 정리 [2] | 2009/01/01 |
| 157 | DIV와 Table for Layout 에 대한 코딩 이야기 [2] | 2009/01/03 |
| 156 | 리다이렉트 방식에 대해서..... | 2009/01/04 |
태그
설정
글쓰기
