퀵메뉴 G마켓처럼 따라다니게 하는 방법 좀 알려주세요??

레인보우1492

· 15년 전 · 조회 1730 1730 · 댓글 2 2

퀵메뉴 G마켓처럼 따라다니게 하는 방법 좀 알려주세요??
G마켓 보시면 오른쪽 퀵메뉴가 처음 접속했을때는 위에서 200픽셀 떨어져 있다가 마우스를 스크롤하면
고정되어 있습니다.
계속 스크롤을 하여 퀵메뉴가 화면 최상단과 만나면 그때부터 스크롤할때마다 최상단에 붙어서 따라다닙니다.
그리고 위로 스크롤하면 최상단에서 따라 다니다가 사이트 최상단으로 가면 처음위치인 200픽셀 떨어져서 고정됩니다.

그냥 단순하게 따라다니게 하는 방법은 알겠는데 G마켓처럼 조건을 걸어서 따라다니게 하는 방법은 도저히 모르겠습니다.

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 2개

멋지군

프로필 보기 이 회원 글보기

15년 전

어떤 사이트에서 얻은 글인데.. 님이 원하는대로 제가 수정했습니다.. ㅎㅎ
출처를 밝히지 못해 비밀글로 합니다..
이런걸 원하세요?
코드 긁어다 확인해보세요.. ㅎㅎ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<title>SmoothMovingLayer Demo</title>
<script type="text/javascript">
//<![CDATA[
function initMoving(target, position, topLimit, btmLimit)
{
if (!target)
return false;

var obj = target;
obj.initTop = position;
obj.topLimit = topLimit;
obj.bottomLimit = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight) - btmLimit - obj.offsetHeight;

obj.style.position = "absolute";
obj.top = obj.initTop;
obj.left = obj.initLeft;

if (typeof(window.pageYOffset) == "number") //WebKit
{
obj.getTop = function()
{
return window.pageYOffset;
}
}
else if (typeof(document.documentElement.scrollTop) == "number")
{
obj.getTop = function()
{
return Math.max(document.documentElement.scrollTop, document.body.scrollTop);
}
}
else
{
obj.getTop = function()
{
return 0;
}
}

if (self.innerHeight) //WebKit
{
obj.getHeight = function()
{
return self.innerHeight;
}
}
else if(document.documentElement.clientHeight)
{
obj.getHeight = function()
{
return document.documentElement.clientHeight;
}
}
else
{
obj.getHeight = function()
{
return 500;
}
}

obj.move = setInterval(function()
{
if (obj.initTop > 0)
{
pos = obj.getTop();
}
else
{
pos = obj.getTop() + obj.getHeight();
//pos = obj.getTop() + obj.getHeight() / 2 - 15;
}

if (pos > obj.bottomLimit)
pos = obj.bottomLimit;
if (pos < obj.topLimit)
pos = obj.topLimit;

interval = obj.top - pos;
obj.top = obj.top - interval / 3;
obj.style.top = obj.top + "px";
}, 5)
}
//]]>
</script>
</head>
<body margin:0 0 0 0;>

<div id="head" style="width: 800px; height: 3000px; background: #eee;">
웹사이트 헤더
</div>
<div id="gotop" style="position: absolute; left: 900px; top: 200px; background: #ddd; width: 15px; height: 50px;">
<a href="#head" title="상단으로">위로</a>
</div>
<script type="text/javascript">initMoving(document.getElementById("gotop"), 50, 50, 50);</script>
</body>
</html>

레인보우1492

프로필 보기 이 회원 글보기

15년 전

정말 감사합니다. 그런데 왜 내려오다가 중간에 멈춰서 안내려오죠?
소스를 아래와 같이 넣었습니다.

<script type="text/javascript">
//<![CDATA[
function initMoving(target, position, topLimit, btmLimit)
{
if (!target)
return false;

var obj = target;
obj.initTop = position;
obj.topLimit = topLimit;
obj.bottomLimit = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight) - btmLimit - obj.offsetHeight;

obj.style.position = "absolute";
obj.top = obj.initTop;
obj.left = obj.initLeft;

if (typeof(window.pageYOffset) == "number") //WebKit
{
obj.getTop = function()
{
return window.pageYOffset;
}
}
else if (typeof(document.documentElement.scrollTop) == "number")
{
obj.getTop = function()
{
return Math.max(document.documentElement.scrollTop, document.body.scrollTop);
}
}
else
{
obj.getTop = function()
{
return 0;
}
}

if (self.innerHeight) //WebKit
{
obj.getHeight = function()
{
return self.innerHeight;
}
}
else if(document.documentElement.clientHeight)
{
obj.getHeight = function()
{
return document.documentElement.clientHeight;
}
}
else
{
obj.getHeight = function()
{
return 500;
}
}

obj.move = setInterval(function()
{
if (obj.initTop > 0)
{
pos = obj.getTop();
}
else
{
pos = obj.getTop() + obj.getHeight();
//pos = obj.getTop() + obj.getHeight() / 2 - 15;
}

if (pos > obj.bottomLimit)
pos = obj.bottomLimit;
if (pos < obj.topLimit)
pos = obj.topLimit;

interval = obj.top - pos;
obj.top = obj.top - interval / 3;
obj.style.top = obj.top + "px";
}, 5)
}
//]]>
</script>

<div id="head" style="width: 10px; height: 567px;">
</div>

<div id="gotop" style="position: absolute; left: 195px; top: 200px; width: 15px;">

<table width="300" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="15"><img src="/images/group/table_bg1.gif" width="15" height="15" border="0" /></td>
<td background="/images/group/table_bg2.gif"></td>
<td width="15"><img src="/images/group/table_bg3.gif" width="15" height="15" border="0" /></td>
</tr>
<tr>
<td background="/images/group/table_bg4.gif"></td>
<td background="/images/group/table_bg5.gif">


<table width="262" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="/images/group/frend_title.gif" width="89" height="21" />
<table width="253" border="0" align="right" cellpadding="0" cellspacing="0">
<tr>
<td width="65"><a href="javascript:sendTwitter('<?=str_replace("'","`",$pInfo[mainName] ? $pInfo[mainName] : $pInfo[name]);?>', 'http://<?=$_SERVER[HTTP_HOST]?>')" ><img src="/images/group/frend_icon_01.jpg" width="57" height="56" border="0" /></a></td>
<td width="65"><a href="javascript:sendFaceBook('<?=str_replace("'","`",$pInfo[mainName] ? $pInfo[mainName] : $pInfo[name]);?>', 'http://<?=$_SERVER[HTTP_HOST]?>?viewCode=<?=$pInfo[code]?>')"><img src="/images/group/frend_icon_02.jpg" width="57" height="56"border="0" /></a></td>
<td width="66"><a href="#none" onclick="javascript:sendMail('<?=str_replace("'","`",$pInfo[mainName] ? $pInfo[mainName] : $pInfo[name]);?>','<?=$pInfo[code]?>')" /></a></a><img src="/images/group/frend_icon_05.jpg" width="57" height="56" border="0" /></a></td>
<td width="57"><a href="#none" onclick="javascript:sendSms('<?=str_replace("'","`",$pInfo[mainName] ? $pInfo[mainName] : $pInfo[name]);?>','<?=$pInfo[code]?>')" /></a></a><img src="/images/group/frend_icon_06.jpg" width="57" height="56" border="0" /></a></td>
</tr>
</table>
</td>
</tr>

<tr>
<td align="right" class="spt10"><a href="/?Pid=u01b05"><img src="/images/group/banner.gif" width="253" height="79" border=0></a></td>
</tr>
<tr>
<td align="right" class="spt10"><a href="/mall/board/board.php?board=2"><img src="/images/group/sub_img01.jpg" border="0" /></a></td>
</tr>
<tr>
<td align="right" class="spt10"><a href="/?Pid=u02b02"><img src="/images/group/sub_img02.jpg" border="0" /></a></td>
</tr>
</table> </td>
<td background="/images/group/table_bg6.gif"></td>
</tr>
<tr>
<td><img src="/images/group/table_bg7.gif" width="15" height="15" border="0" /></td>
<td background="/images/group/table_bg8.gif"></td>
<td><img src="/images/group/table_bg9.gif" width="15" height="15" border="0" /></td>
</tr>
</table>

<table width="262" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="15"></td>
</tr>
</table>

<table width="300" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="15"><img src="/images/group/table_bg1.gif" width="15" height="15" border="0" /></td>
<td background="/images/group/table_bg2.gif"></td>
<td width="15"><img src="/images/group/table_bg3.gif" width="15" height="15" border="0" /></td>
</tr>
<tr>
<td background="/images/group/table_bg4.gif"></td>
<td background="/images/group/table_bg5.gif">

<table width="262" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><img src="/images/group/tit_01.gif" /></td>
</tr>
<tr>
<td><table border="0" cellpadding="0" cellspacing="0" width="262">
<?
$notice_res = mysql_query("select * from snsBoard where boardkind='1' order by serialnum desc limit 5");
while($notice = mysql_fetch_array($notice_res))
{
$n_title = mb_substr($notice[title], 0, 15, "UTF-8");
if($notice[title] != $n_title) $notice[title] = $n_title."..";

$ex_date = explode(" ", $notice[wdate]);
?>
<tr>
<td width="3" height="21"><img src="/images/group/c_dot.gif" /></td>
<td width="170" style="font-size:12px;font-family:Gulim;color:#898989"> <a href="/mall/board/boardread.php?board=1&page=1&serialnum=<?=$notice[serialnum]?>"><font color="#898989"><?=$notice[title]?></font></a></td>
<td width="89" style="font-size:12px;font-family:Gulim;color:#898989">[<?=$ex_date[0]?>]</td>
</tr>
<?
}
?>

<tr>
<td height="13" colspan="3"></td>
</tr>
</table></td>
</tr>
</table> </td>
<td background="/images/group/table_bg6.gif"></td>
</tr>
<tr>
<td><img src="/images/group/table_bg7.gif" width="15" height="15" border="0" /></td>
<td background="/images/group/table_bg8.gif"></td>
<td><img src="/images/group/table_bg9.gif" width="15" height="15" border="0" /></td>
</tr>
</table>



</div>
<script type="text/javascript">initMoving(document.getElementById("gotop"), 330, 330, 50);</script>

게시글 목록

번호	제목	글쓴이	조회	날짜
284508	네이버에서 신디케이션 전체게시물이 보이지않는다며 답변이왔습니다T.T 12	유아이	17,732	11년 전
284499	문의글을 엑셀로 정리해서 달라는데요 mysql 에서 내보내기하면 한글다깨지는데요 4	앱보드	12,553	11년 전
284492	최근 로그인한 회원이 리스트 검색시 리스트의 최상위로... 5	alexseo	10,188	11년 전
284490	포인트랭크 해결 좀 해주세요 ㅜㅜ 7	제씨	10,917	11년 전
284484	포인트 랭크 질문 좀 드리겠습니다. 제발 부탁 좀 드리겠습니다 해결좀해주세요 ㅜㅜ 6	제씨	10,493	11년 전
284481	robots.txt 와 신디케이션 1	아썸	11,846	11년 전
284478	핸드폰으로 pc용 접속하면.... 화면사이즈문제 3	네오빡스	15,029	11년 전
284476	혹시 http://www.appsgeyser.com 여기에서.....	스타크루즈	11,490	11년 전
284474	이런 최신글 있을까요? 3	kimch	11,599	11년 전
284472	불당썸 사용 그림엑박 1	연금술샤	11,422	11년 전
284470	도메인 변경후 이미지 깨짐 2	호텔천사	12,270	11년 전
284458	폼메일전송 메일보내는방법좀요 2	별을기다리며	14,431	11년 전
284457	로그인,로그아웃,회원가입 스킨적용 및 연동방법좀요ㅠ 2	별을기다리며	11,924	11년 전
284454	회원가입에 필요한 파일? 2	MJEI	9,692	11년 전
284453	초보 게시판 관련 질문좀 드립니다. 2	장미란	10,565	11년 전
284447	카운트 갯수 구할때요 limit 이 안먹히는데요 왜그런가요 ㅎㅎ? 리밋할려면 어떻게 해야할까요?? 2	앱보드	16,398	11년 전
284446	회원가입시 아이디에 하이픈 - 사용하는 방법을 가르쳐주세요 2	닷넷	10,451	11년 전
284444	리스트 게시글 묶음처리 2	뽁스	9,132	11년 전
284441	아이핀 연동할때 세션값 변경되는 현상 1	비앙이	10,573	11년 전
284440	셀렉트문은 하나만 사용하고요. 3	alexseo	5,589	11년 전

1 2 3

전체 목록