Javascript

jQuery 플로팅 레이어

* Floating Layer

  • new FloatingLayer(el, method, marginTop);

  • 엘리먼트를 스크롤을 내려도 고정시켜준다.

  • 인자값 el : 적용시킬 엘리먼트(자바스크립트 DOM으로 받는다.)

  • 인자값 method : 수치를 직접 고칠지 class로 조절할지 정한다. (true:class토글방식, false:수치 직접입력

  • 인자값 marginTop : 사용자 상단여백

  • 예제)

    var box1 = new FloatingLayer($('div.box1').get(0), 130);
    var box2 = new FloatingLayer(document.getElementById('box2'));


  • 두번째 인자값이 있으면 우선으로 여백으로 인식하지만 값이 없으면 position:absolute 상태에서 top값으로 인식하고 그게 아니라면 top:0이된다.

  • method 인자값이 true인경우에 스크롤이 레이어보다 내려가면 레이어에 .fixed클래스가 추가된다.

  • jQuery가 로드되어있어야한다.



* html예제

<div id="side">#side</div>
<script src="/img_up/_addon/_plugin/FloatingLayer/FloatingLayer.0.0.1.js"></script>
<script>
var nav = new FloatingLayer(document.getElementById('side'), true, 75);
</script>


* css예제(method인자값이 true인경우)

#side { position: absolute; left: 0; top: 0; width: 230px; }
#side.fixed { position: fixed; left: 15px; top: 36px; }
게시글 공유 URL복사
댓글[2]

열기 닫기

댓글작성

열기 닫기

댓글작성

top