[jQuery] 사이드바를 고정하기 위한 Theia Sticky Sidebar 소개 및 적용법
페이지 정보
루루아빠
3,941 2
2016.02.10 18:57:45
짧은주소
-
https://yadolee.com/tip/370 주소복사
본문
본문에 내용이 길어 스크롤을 사용할 경우 사이드바는 늘상 사라지기 마련이고 사이드바의 메뉴를 선택하기 위해선 수고스러움이 꽤나 크다.
Theia Sticky Sidebar 를 사용함으로 사이드바를 늘 보여주도록 설정해본다.
예제는 이윰빌더 반응형에 맞게 수정하는 방법이다.
먼저 Theia Sticky Sidebar 를 배포하는 github 를 방문해서 다운받아 놓는다. (github를 클릭, 바로 다운로는 여기를 클릭)
압축을 풀면 여러 폴더와 파일이 있으나 단지 필요한 건 js 폴더에 있는 theia-sticky-sidebar.js 파일이다.
이 파일을 그누보드5/eyoom/theme/설치된 테마/plugins 폴더 아래 theia-sticky-sidebar 폴더를 만들고 그 폴더에 theia-sticky-sidebar.js 를 복사해 넣는다.
1. 그누보드5/eyoom/theme/설치된 테마/layout/tail.bs.html 을 열어 스크립트로 이루어진 그룹 줄 아래쪽에 아래 소스를 추가한다.
2. 그누보드5/eyoom/theme/설치된 테마/layout/side.bs.html 을 열어 <!--{* Start Sidebar *}--> 시작, 바로 아래 <div class="basic-bs-side col-md-3"> 아래쪽에 다음과 같은 소스를 추가한다.
모든 작업이 올바르게 추가되었다면 홈페이지의 캐시 정보를 삭제한 후 스크롤을 내려보면서 혹은 올려보면서 사이드바의 고정 유무를 확인해본다.
Theia Sticky Sidebar 를 사용함으로 사이드바를 늘 보여주도록 설정해본다.
예제는 이윰빌더 반응형에 맞게 수정하는 방법이다.
먼저 Theia Sticky Sidebar 를 배포하는 github 를 방문해서 다운받아 놓는다. (github를 클릭, 바로 다운로는 여기를 클릭)
압축을 풀면 여러 폴더와 파일이 있으나 단지 필요한 건 js 폴더에 있는 theia-sticky-sidebar.js 파일이다.
이 파일을 그누보드5/eyoom/theme/설치된 테마/plugins 폴더 아래 theia-sticky-sidebar 폴더를 만들고 그 폴더에 theia-sticky-sidebar.js 를 복사해 넣는다.
1. 그누보드5/eyoom/theme/설치된 테마/layout/tail.bs.html 을 열어 스크립트로 이루어진 그룹 줄 아래쪽에 아래 소스를 추가한다.
<script type="text/javascript" src="../plugins/theia-sticky-sidebar/theia-sticky-sidebar.js"></script>
위 소스 아래에 다음 소스를 첨부한다.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.basic-bs-side').theiaStickySidebar({
// Settings
additionalMarginTop: 30
});
});
</script>
2. 그누보드5/eyoom/theme/설치된 테마/layout/side.bs.html 을 열어 <!--{* Start Sidebar *}--> 시작, 바로 아래 <div class="basic-bs-side col-md-3"> 아래쪽에 다음과 같은 소스를 추가한다.
<div class="basic-bs-side col-md-3">
<div class="theiaStickySidebar">
</div><!--{* End col-md-3 *}-->의 소스 바로 위쪽에 상기 소스를 닫기 위해 소스를 추가한다.
</div>
</div><!--{* End col-md-3 *}-->
모든 작업이 올바르게 추가되었다면 홈페이지의 캐시 정보를 삭제한 후 스크롤을 내려보면서 혹은 올려보면서 사이드바의 고정 유무를 확인해본다.
추천인
레벨 101
경험치 1,523,344
Progress Bar 27.54%
- 가입일 : 2015-03-04 03:24:54
- 서명 : KNOW YOUR LIMITS
BUT NEVER STOP TRYING TO EXCEED THEM !!
- 자기소개 : 루루의 자랑
루루아빠랍니다~~
최신댓글이 없습니다.


댓글2
루루아빠님의 댓글
루루아빠님의 댓글