[jQuery] 사이드바를 고정하기 위한 Theia Sticky Sidebar 소개 및 적용법

페이지 정보

yadolee 루루아빠 3,962 2 2016.02.10 18:57:45

본문

본문에 내용이 길어 스크롤을 사용할 경우 사이드바는 늘상 사라지기 마련이고 사이드바의 메뉴를 선택하기 위해선 수고스러움이 꽤나 크다.
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 *}-->

모든 작업이 올바르게 추가되었다면 홈페이지의 캐시 정보를 삭제한 후 스크롤을 내려보면서 혹은 올려보면서 사이드바의 고정 유무를 확인해본다.
추천인
  • 추천해 주세요

댓글2

루루아빠님의 댓글

yadolee
루루아빠 글쓴이 2016.03.04 01:18
basic-bs .basic-bs-main 과 basic-bs .basic-bs-side 의 사이를 가로지는 외곽선을 올바르게 표현하고 스크롤시 어긋나는 부분을 해결하기 위해 다음과 같은 추가 작업이 필요하다 그누보드5/eyoom/theme/설치된 테마/css/basic_bs.css 를 열어 .basic-bs .basic-bs-side { 를 검색하고 아래 소스를 추가한다.

	margin-left: -1px;		
	border-left: 1px solid #ddd;		
또한 사이드 메뉴에 배경색(background: #f8f8f8;)을 주게 되면 스크롤시 특정 브라우져의 하단 부분에 색을 덧칠하는 효과가 나타나므로 주석처리하는게 좋을 듯 하다.

루루아빠님의 댓글

yadolee
루루아빠 글쓴이 2016.02.10 19:10
꽤나 유용하게 사용할 만한 플러그인이다

Total 7691626 페이지

제목 글쓴이 날짜 조회 추천
제로  🏆 💾 게시판 타이틀메뉴 자동생성+카테고리 --> 이미지로 루루아빠 2006.08.01 3.7k 0
이윰  🏆 Eyoom Builder 1.2.0 패치 루루아빠 2015.12.21 3.4k 0
그누•영카트  🏆 그누보드 5.3.2.1 패치 shadow2fox 2018.12.11 2.5k 0
제로  🏆 자신이 쓴 글을 수정할 때 조회수 올라가지 않게 루루아빠 2006.09.25 3.6k 0
그누•영카트  🏆 그누보드 5.1.10 패치 루루아빠 2015.12.23 3.0k 0
그누•영카트  🏆 영카트 5.3.2.1 패치 shadow2fox 2018.12.11 2.6k 0
기타  🔒 iplug 공동구매 카페주소 루루아빠 2007.03.01 8 0
그누•영카트  🏆 영카트 5.1.9 패치 루루아빠 2015.12.23 3.6k 0
그누•영카트  🏆 그누보드 5.3.2.2 shadow2fox 2018.12.18 2.4k 0
그누•영카트  🔒 HTMLPurifier 7레벨 이상은 적용 안받기 루루아빠 2015.03.10 8 0
그누•영카트  🏆 영카트 5.1.10 패치 루루아빠 2015.12.23 3.5k 0
그누•영카트  🏆 영카트 5.3.2.2 shadow2fox 2018.12.18 2.6k 0
그누•영카트  🏆 메인화면에 블로그 형태로 게시판 보이기 루루아빠 2015.03.10 3.8k 0
JavaScript  🏆 현재창 아이프레임 유무 확인 shadow2fox 2018.12.26 2.2k 0
이윰  🏆 모바일과 피시에서 내용 숨기기 보이기 루루아빠 2015.03.15 3.2k 0
기타  댓글+1🔒 마우스 및 키보드 복사 금지 제어하기 루루아빠 2015.03.16 14 0
이윰  🏆 익명 게시판에 댓글 작성시 기본으로 익명 체크되게 하기 루루아빠 2015.12.27 3.3k 0
그누•영카트  🏆 그누보드 5.3.2.3 shadow2fox 2018.12.28 2.4k 0
이윰  댓글+1🏆 일정 레벨 이상만 메뉴 보여주기 루루아빠 2015.03.17 3.4k 0
이윰  댓글+1🏆 익명글 사용 시 익명의 포토와 글쓴이 사이드뷰 끄기 루루아빠 2015.12.29 3.6k 0
그누•영카트  🏆 영카트 5.3.2.3 shadow2fox 2018.12.29 2.5k 0
이윰  🏆 PHP 7.x에서 이윰빌더 알람 푸시(push) 관련 PHP Notice: Undefined index error 해결하기 shadow2fox 2019.01.01 2.8k 0
이윰  댓글+1🏆 디바이스에 따른 내용 보이기 숨기기 루루아빠 2015.03.20 3.8k 0
그누•영카트  🏆 그누보드 5.3.2.4 shadow2fox 2019.01.08 2.4k 0
그누•영카트  🏆 영카트 5.3.2.4 shadow2fox 2019.01.08 2.6k 0
이윰  🏆 게시판 다운로드 포인트를 마이너스로 설정할 경우 루루아빠 2015.03.23 3.2k 0
그누•영카트  🏆 그누보드 5.1.11 패치 루루아빠 2016.01.10 3.3k 0
그누•영카트  🏆 회원 닉네임 길이 제한두기 루루아빠 2015.03.28 3.3k 0
그누•영카트  🏆 영카트 5.1.11 패치 루루아빠 2016.01.10 3.5k 0
이윰  🏆 익명 게시판에 글 작성시 기본으로 익명 체크되게 하기 루루아빠 2015.03.28 3.4k 0