고정된 배너는 스크롤바가 내려가면 더이상 보이지 않는 단점이 있습니다.

그렇지만 스크롤바를 내려도 우측 한켠에 떠 다니는 듯한 배너(플로팅배너)를 구현 하는 방법을 구글링을 통해 찾았습니다.

너무 이곳적곳을 돌아다니다가 찾은 곳이라 원제작자의 주소를 잊어 버렸네요.

확실하게 말하지만...제가 구글링하다가 찾은 소스입니다. 제 소스가 아닙니다.

혹시 원제자가자가 보신다면 알려주세요. 출처 꼭 남기고 싶습니다.

플로팅배너 소스

사이드바에 따라다니는 배너 소스는 아래와 같습니다.

제가 테스트 해봤는데 잘 됩니다.

<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>

위와 같이 소스 입니다.

구글 애드센스에 적용가능 한가?

구글 애드센스에서는 플로팅 배너를 싫어 합니다.

그래서 저도 며칠 적용했다가 아래와 같은 답변을 알게되어 바로 배너를 고정형으로 변경 했습니다.

https://support.google.com/adsense/thread/91885837?hl=ko

필요하신 분은 참고 하세요.

구글에서 싫어하니 애드센스용으로는 사용하지 마세요. ^^