[HTML+CSS] 간단한 플로팅 배너 예제

플로팅 배너(따라다니는 배너) 흔히 쇼핑몰 사이트이나 사이드 광고에서 많이 볼 수 있는 기능입니다.

아래 그림처럼 오른쪽에 '장바구니', '최근본상품' 같은 내용을 보여줍니다.

 

플로팅 배너 예시

 

 

플로팅 배너는 쉽게 말하면, 현재 스크롤이 이동한 높이를 배너의 높이에 적용시킨다라고 생각하면 쉽게 이해하실 수 있습니다. 

 

아래의 예제 코드를 살펴 보겠습니다.

 

See the Pen KKVGwOa by limqo (@limqo) on CodePen.

 

js를 보면 $(window).scroll()를 이용하여 스크롤이 입력되면 인식할 수 있습니다. 추가적으로 $("#target").scroll()처럼 특정 영역을 id나 class로 지정하여 사용할 수도 있습니다.

 

스크롤을 인식 하였다면 animate()을 이용하여 좀더 자연스럽게 동작할 수 있도록 해줍니다. 만약 애니메이션 효과 없이 화면에 고정시키고자 하면 $(".target").css('top', bannerTop);으로 바로 css를 지정하면 됩니다.