[CSS/JS] 티스토리 스크롤 졸졸 따라다니는 플로팅 배너 만들기

반응형 웹사이트들이 많아지면서 스크롤 내리면 떠있는 메뉴, 광고 등을 보여주도록 하는 기법들이 많이 사용되고 있습니다.

CSS를 알면 간단하게 처리할 수 있으며, javascript까지 알면 지금 WENDY의 ANALOG N0TE처럼 스크롤 내리면 그때부터 따라오도록 처리하는 등 여러 가지 처리를 할 수 있습니다.

플로팅 메뉴 동작 모습

우측에 보면 스크롤을 내려도 최근 글, 최근 댓글 메뉴가 떠있는 메뉴로 동작중인 것을 보실 수 있습니다.

스크롤이 아무리 길어지더라도 보여주고 싶은 메뉴를 보여줄 때 사용할 수 있습니다.

주의하실 점은 구글 애드센스를 플로팅 메뉴에 적용하는 것은 정책에 위배될 수 있으므로 책임은 본인에게 있습니다.

 

javascript code

흔한 기법이지만 CSS를 몰라서, Javascript를 몰라서 사용하지 못하셨다면! 아주아주 간단하게 할 수 있는 방법으로 설명드리겠습니다.

<header>와 </header> 사이에 아래 코드를 추가하거나, 이미 $(window).scroll(function(event) 코드가 추가되어있다면 기존 코드는 두고 아래에 if(jQuery(window).scrollTop() 코드를 적절한 위치에 추가합니다.

 

<script type="text/javascript">
  
$(window).scroll(function(event){
    if(jQuery(window).scrollTop() > jQuery(".banner").offset().top) { 
        jQuery("#chase").css("position", "fixed");
    }
    else if((jQuery(window).scrollTop() < jQuery(".banner").offset().top)) { 
        jQuery("#chase").css("position", "static");
    }
});
</script>
  

 

위의 javascript 코드를 추가한다고 해서 아직 변하는 건 없습니다.

변화를 주기 위해선 .banner 와 #chase를 주목할 필요가 있습니다.

위의 스크립트를 해석하면 브라우저 현재 스크롤이 .banner class div 보다 더 내려온 경우 #chase id의 속성을 position:fixed로 변경하게 되고, 반대로 스크롤이 올라가면 position:static을 통해 원래대로 처리하게 되어 스크롤에 따라서 자동으로 처리되도록 되어있습니다.

.banner, #chase 이름은 자유롭게 변경할 수 있으며, 변경 시 javascript, html 코드에 맞게 변경하셔야 합니다.

 

html code

WENDY의 ANALOG N0TE 같은 경우 우측에 s_sidebar_element 내에 배너를 삽입하여 떠있을 수 있도록 처리했습니다.

 

 

<s_sidebar_element>
    <div class="banner">
        <div id="chase" style="top:0px;">
      ...
        </div>
    </div>
</s_sidebar_element>
  

 

생각보다 너무나도 간단한 코드로 적용되어있지 않나요??

여기서의 핵심은 banner div를 생성하고 그 안에 chase div를 생성하여 스크롤을 감지하여 떠있을 수 있도록 하는 것입니다.

 

제가 사용하는 스킨 중심으로 설명을 드렸지만, 다른 스킨에 적용할 때도 그리 어렵지 않게 적용이 가능합니다.

잘 안 되는 부분이 있거나 도움이 필요하신 분들은 댓글 달아주시면 도움드리겠습니다 :)