따라 다니는 배너 지정한 위치에서 부터 스크롤 되게 하는 방법


고정된 배너 보다는 따라 다니는 배너 효과가 더 좋다는 사실은 사이트를 관리 하시는 분들이라면 다 아실 것입니다. 그래서 많이들 사이드에 따라 다니는 배너를 달아 두는 경우가 많습니다.

하지만 여러가지 여건상 블로그나 사이트 관리 차원에서 처음부터 따라 다니는게 아니라 관리자가 지정한 위치 부터 배너가 따라 다니게 하고 싶을때가 있습니다. 
 

저도 지금 사이드 메뉴 쪽에 배너를 하나 스크롤시 따라 다니게 해 놨는데 제 블로그 폭을 감암할때 여백 사이드에 배너 하나를 따라 다니게 할려니 좀 애매한 감이 없잖아 있어 어짜피 오른쪽 사이드 메뉴 아래쪽에는 빈공간이라 빈공간이 시작되는 곳부터 배너를 따라 다니게 하는게 공간적으로 봤을때 좋을거 같아 코드를 한번 만들어 봤습니다.
 

물론 처음부터 제가 만든건 아닙니다. 제가 HTML, Script, CSS 부분에 좀 약한면이 있어서 여기 저기 사이트 돌아 다니면서 코드를 참조해서 몇일간 여러번의 테스트를 거쳐서 저에게 맞게 코드를 만들었습니다.
 

1. 먼저 아래의 Script 코드를 </head> 윗부분에 넣어 주시기 바랍니다.

<script type="text/javascript">
    var BASE = 1715; // 스크롤 시작 위치   
    var LEFT = 708; // 왼쪽 여백   
    var TOP1 = 1715; // 위쪽 여백   
    var TOP2 = 100; // 스크롤시 브라우저 위쪽과 떨어지는 거리   
    var ActiveSpeed = 35;   
    var ScrollSpeed = 20;   
    var Timer;     

    function
RefreshM() 

    {    
        var StartPoint, EndPoint;    
        StartPoint = parseInt(document.getElementById('SCROLL').style.top, 10);    
        EndPoint = Math.max(document.documentElement.scrollTop, document.body.scrollTop) + TOP2;    

        if
(EndPoint < TOP1) EndPoint = TOP1;    

        if (StartPoint != EndPoint) 
        {     
            ScrollAmount = Math.ceil( Math.abs( EndPoint - StartPoint ) / 15 );                                   document.getElementById('SCROLL').style.top =                                                                                          parseInt(document.getElementById('SCROLL').style.top, 10) +
                                    ( ( EndPoint<StartPoint ) ? -ScrollAmount : ScrollAmount ) + "px";     

            RefreshTimer = ScrollSpeed;     
       }   
       
       Timer = setTimeout("RefreshM();", ActiveSpeed);    
     }   

    function
InitializeM() 

    {   
        document.getElementById('SCROLL').style.left = LEFT + "px";                              
        
document.getElementById('SCROLL').style.top =
                                                 document.body.scrollTop + BASE + "px";    

        RefreshM(); 
}
 </script>
 
이 Script 에서 변수값으로 설정되어 있는 수치를 사용자 사이트에 맞게끔 수정 해야 하는데 일단 코드를 다 작성하고 수정된 사이트를 보면서 작업해야 하기 때문에 일단은 그냥 넘어 가도록 하겠습니다.

2. 위 Script 코드를 집어 넣었으면 body 안에 방금 만든 Script 함수명을 집어 넣도록 하겠습니다.

<body onload="InitializeM();">

3. 이제는 실질적으로 광고 코드를 집어 넣도록 하겠습니다. 광고 코드는 티스토리의 경우 body 아래쪽에 보시면 div id="container" 라는 코드가 보이실 것입니다. 그 아래의 광고코드를 넣어 주시기 바랍니다.

<div style="position:relative;width:0px;height:0px">
<div id="SCROLL"> [배너코드] </div>
</div>
 
티스토리의 경우 왜 div id="container" 라는 코드 아래에 넣어야 하면, 그 위치에 넣어야지 브라우저 사이즈가 조정될때 광고가 이리저리 움직이지 않고 같은 자리에 위치 하기 때문입니다. 티스토리가 아닌 경우 광고 코드를 본문이 시작되는 곳에 넣어 주시면 될것입니다.

4. 마지막으로 CSS 코드 부분에 아래 코드를 제일 마지막 부분에 넣어 주시기 바랍니다.

#SCROLL {
    POSITION: absolute; 
    PADDING-BOTTOM: 0pt; 
    MARGIN: 0pt; 
    PADDING-LEFT: 0px; 
    PADDING-RIGHT: 0pt; 
    RIGHT: 0px; 
    PADDING-TOP: 0pt; 
    TOP: 1715px;
}
 

이렇게 하면 기본적인 코드는 삽입이 다 된 상태 입니다. 이제 사이트를 확인해 가면서 위치를 조정해 주시면 되는데 1번에서 BASE, LEFT, TOP1 코드의 수치를 적정히 사용자가 원하는 수치로 조절해 주시면 끝이 납니다.

이제 확인을 해보시면 사용자가 지정한 위치 부터 스크롤시 사이드 배너가 따라 다닐 것입니다.

PS. 혹시나 해서 사이드 배너를 넣었는데 제 블로그는 역시나 클릭율이 너무 저조 하네요. ㅜ.ㅜ
     조만간에 전 내려야 할거 같습니다. 



신고
  1. 이런거 필요해서 하려다가 포기하고 그냥 속성을 fixed로 바꿔버렸어요 ㅎㅎ. 나중에 스킨 수정할때 써먹어야 할 것 같네요. 어디에 메모를.. ㅎㅎ;;;
    전 우측에 그림을 넣었습니다. 텍스트는 그다지 클릭이 안되더라구요 ㅠㅠ
  2. 우호호 감사합니다.
    안그래도 오른쪽 배너에 적용할까 생각중이었는데
    퇴근후에 한번 적용해봐야겠네요.
    잘보고 갑니다 ^^ /
  3. 아. 이런 방법이 있군요.
    일전에도 플로팅 배너 소개해 주셔서 잘 적용했었는데.
    저도 효과는 별로라 ㅡ.ㅡ
    나중에 필요하게 되면 꼭 참고해야 겠습니다.
    • 2012.02.05 08:11 신고 [Edit/Del]
      따라 다니는 배너라 해도 그다지 효과는 모르겠더군요.
      요즘은 정책도 계속 바뀌고 있는 상태라 이 기능이 필요 할지는 모르겠네요. ㅋ
  4. 유익한 글 잘보고 갑니다.^^
  5. 감사합니다~~
    이런걸 찾고있었는데 다들 그냥 처음부터 따라 오는 것만 써놨더라구요.
    저한테 딱 맞는 내용이라서 너무 감사합니다.ㅋ
  6. 적용했더니 깔끔하게 잘 작동됩니다. 감사드려요~ ^^
  7. 오존
    여러사이트를 돌아다니다가 안되서 포기하려고했는데,
    자세한 주석과 소스에 대한 설명 잘 이해되고 감사합니다.
    너무 유용하게 잘 썼습니다.
    블러그는 절대 내리지 마세요.

Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기