스크롤 따라다니는 레이어
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 6 / 12 pages
| 제목 |
날짜 |
|---|---|---|
 | 코딩 배울 수 있는 사이트 모음(HTML/CSS/JS/IMG/PHP) | 2018/01/03 |
|
| jQuery를 배울수 있는 동네들입니다. | 2013/08/09 |
|
| 관련 링크 [1] | 2010/05/23 |
| 135 | [웹폰트] Daum font로 Google Font API 따라잡기 | 2013/08/09 |
| 134 | [Script] 게시판 등 에서 웹페이지에서 특정 부분 감췄다보여주기 - 레이어 토글 [1] | 2004/06/04 |
| 133 |
[Script] 화면 왼쪽에 숨겨진 레이어 꺼내기
[1]
| 2009/01/20 |
| 132 |
[Script] 슬라이딩 레이어
[1]
| 2009/01/20 |
| 131 |
[웹폰트] 구글 웹폰트 서비스 이용하기
| 2013/08/06 |
| 130 | [HTML5] IE보완 - 조건부 주석 | 2013/08/06 |
| 129 |
[웹접근성] 웹 접근성 이슈
| 2013/08/06 |
| 128 |
[웹접근성] 웹접근성이란
| 2013/08/06 |
| 127 | [Script] 페이지 이동 (메타태그, 자바스크립트, PHP) | 2003/09/24 |
| 126 | [HTML5] img style 속성 | 2013/03/12 |
| 125 | [Meta] Meta Tag(메타태그) 사용법 | 2013/03/05 |
| 124 | [부트스트랩] #2 부트스트랩의 특징 [1] | 2013/03/04 |
| 123 | [부트스트랩] #1 부트스트랩이란? | 2013/03/01 |
| 122 | [HTML5] HTML5 시멘틱 구조 태그 | 2013/02/28 |
| 121 | [부트스트랩] 부트스트랩의 아이콘 지원 브라우저 | 2013/02/25 |
| 120 | [부트스트랩] 기본 부트스트랩 템플릿 | 2013/02/24 |
| 119 |
[Script] 자바스크립트로 CSS 불러오기
| 2013/02/22 |
| 118 | [UI] jquery menu slide | 2012/12/16 |
| 117 | [Script] 로그인창 띄우기 | 2012/12/14 |
| 116 | [Script] 세로 슬라이드 메뉴, 마우스 오버 [1] | 2012/12/13 |
태그
설정
글쓰기해시태그 디렉터리
최근 댓글
-
-
4시간 전
-
4시간 전
-
7시간 전
-
