- 스티키 고정 사이드바
- 는 순수 자바스크립트로 작성된 반응형 Sticky 요소 라이브러리로서, 이를 이용하면 웹사이트에서 (추가적인 Css 없이도)Sticky 요소를 쉽게 고정시킬 수 있다!
-
1.
Sticky-JS 플러그인을 사용하려면; 먼저, 스크립트 소스를 불러온 뒤 초기화하면서 스티키 요소를 지정해주어야 한다.
다음, Sticky 요소에
.sticky클래스를 추가하여 컴포넌트를 초기화하고, 가장 가까운 부모요소(보통, <body>)에서data-sticky-container속성을 준다: -
2.
data-sticky-container속성 및 옵션이 있는 중첩 스티키 요소:
<script src="vendors/sticky-js/sticky.min.js"></script>
<!-- 스티키 요소 초기화 -->
<script>
var sticky= new Sticky('.sticky') // 스티키 요소: .sticky
</script>
➥
특정 뷰포트 크기에서부터 스티키를 활성화하기 위해 data-sticky-for= '값' 속성으로
브레이크 포인트를 설정해줄 수 있다(곧, 스티키는 설정된 브레이크포인트 너비보다 작을 때 해제된다).
또한, 스크롤 시 페이지와 스티키 요소 사이에 마진을 주기위해 data-margin-top= '값' 속성을 추가해줄 수도 있다.
나아가, data-sticky-wrap= "true" 속성을 사용하면;
그것은 스티키 요소를 가진 <span> .. </span>으로 래핑되는 진정한 스티키 요소이다
- 이는 컨텐츠가 점핑하는 것을 방지한다!