애니빌드.LAB
Javascript
jQuery 플로팅 레이어
- 망구
- 2014-01-29 11:14:00
- hit6818
- http://wdev.anybuild.co.kr/bbs/javascript/1623
* Floating Layer
* html예제
* css예제(method인자값이 true인경우)
- 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복사
댓글작성
열기 닫기
열기 닫기