퀵메뉴 G마켓처럼 따라다니게 하는 방법 좀 알려주세요?? > 그누4 질문답변

그누4 질문답변

그누보드4 관련 질문은 QA 로 이전됩니다. QA 그누보드4 바로가기
기존 게시물은 열람만 가능합니다.

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

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

본문

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

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

댓글 전체

레인보우1492 자기소개 아이디로 검색 회원게시물 10.10.31 00:35:06
정말 감사합니다. 그런데 왜 내려오다가 중간에 멈춰서 안내려오죠?
소스를 아래와 같이 넣었습니다.
<!-- 퀵메뉴 -->
<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">&nbsp;<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>
<!-- 퀵메뉴 -->
목록
문의 PC 버전
© SIRSOFT
현재 페이지 제일 처음으로