스크롤 시 배너가 상단(Top)에 도달하면 따라오는 배너 (Sticky 배너)

배너가 아랫쪽에 위치해 있다가 사용자가 아래로 스크롤 시 배너가 상단(Top)에 도달하면 고정되어 따라오는 배너 입니다.

어떤식으로 구현인지 말로 표현하기가 힘드네요^^;;

아래 영상을 참조해주세요.

 

<div id="sticky_test2" style="position:block;">
광고 스크립트 삽입
</div>
 
<script>
function stiky_custom(id)
{
var tid = $(id)
var tid_t = tid.offset().top
var window_t = $(window).scrollTop()
// console.log(tid_t, window_t)
 
if( origin_val.top <= window_t )
{
tid.css('position', 'fixed').css('top',60).css('width','100%')
}
else
{
tid.css('position', origin_val.position).css('top',origin_val.top)
}
}
 
var sticky_id = '#sticky_test2'
var sticky_id_d = $(sticky_id)
var origin_val = {}
origin_val.top = $(sticky_id).offset().top
origin_val.position = $(sticky_id).css('position')
 
$(window).scroll(function(){
stiky_custom(sticky_id)
})
</script>

 

레이아웃 별로 좌측, 우측 사이드에 위젯 또는 광고스크립트를 삽입하게끔 지원되게 되어있습니다. 거기에 붙여넣기 해주시면 됩니다.

광고 스크립트 삽입란에 광고코드 넣어주시는거 잊지 마세요.