플로팅 배너 (따라다니는 스크롤 배너) on redgoose note

플로팅 배너 (따라다니는 스크롤 배너)

Nest: Development Category: Javascript 2013-03-16

  • 자바스크립트 메서드를 사용하여 화면 스크롤하면 따라가는 배너를 만들 수 있다.
  • 자바스크립트 소스 다운로드: sc94_Floating.zip
  • 코드호출의 예제: new Floating(document.getElementById("floater1"),400,200,30,10);
<div id="floater1" style="position:absolute; border:1px solid blue;">BOX1</div>
<div id="floater2" style="position:absolute; border:1px solid blue;">BOX2</div>
<div id="floater3" style="border:1px solid blue;">BOX3</div> 

<div style="width:2000px; border:1px solid red;">HEADER</div>
<div style="height: 1800px;"></div>
<div style="width:2000px; border:1px solid red;">FOOTER</div>

<script type="text/javascript" src="./sc94_Floating.js"></script>
<script>
// 사용법 : new Floating(적용할개체, X축여백, Y축여백, 미끄러지는속도:작을수록빠름(기본20), 빠르기:작을수록부드러움(기본10)); 
new Floating(document.getElementById("floater1"),400,200,30,10);
new Floating(document.getElementById("floater2"),200,120,20,10);
new Floating(document.getElementById("floater3"),0,0,10,10);
</script>

나중에는 position: sticky라고 좋은 css 속성이 추가되었다.
훨씬 간편하게 사용할 수 있고, 퍼포먼스도 좋음