- 스티키 고정바
- 1. Sticky-JS 플러그인을 사용하려면; 먼저, 스크립트 소스를 불러온 뒤 초기화하면서 스티키 요소를 지정해주어야 한다:
-
2.
다음, Sticky 요소에
.sticky클래스를 추가하여 컴포넌트를 초기화하고, 가장 가까운 부모요소(보통, <body>)에서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" 속성을 사용해주면; 컨텐츠가 점핑하는 것을 방지한다!
- 오프캔버스 내비게이션바
- 동적이고 유연한 오프캔버스 내비게이션바 , 항시 축소되어 있는 오프캔버스 내비게이션바 스티키 고정바와 결합된 상단 Fancy 내비게이션바 예제, 스크롤스파이 가로/세로 내비게이션인 및 예제
░