플로팅배너1 [HTML+CSS] 간단한 플로팅 배너 예제 플로팅 배너(따라다니는 배너) 흔히 쇼핑몰 사이트이나 사이드 광고에서 많이 볼 수 있는 기능입니다. 아래 그림처럼 오른쪽에 '장바구니', '최근본상품' 같은 내용을 보여줍니다. 플로팅 배너는 쉽게 말하면, 현재 스크롤이 이동한 높이를 배너의 높이에 적용시킨다라고 생각하면 쉽게 이해하실 수 있습니다. 아래의 예제 코드를 살펴 보겠습니다. See the Pen KKVGwOa by limqo (@limqo) on CodePen. js를 보면 $(window).scroll()를 이용하여 스크롤이 입력되면 인식할 수 있습니다. 추가적으로 $("#target").scroll()처럼 특정 영역을 id나 class로 지정하여 사용할 수도 있습니다. 스크롤을 인식 하였다면 animate()을 이용하여 좀더 자연스럽게 동.. 2020. 7. 16. 이전 1 다음 728x90 반응형