오른쪽 사이드 메뉴를 스크롤 따라다니게 하는 방법에 관해서 질문합니다.
908
2016.12.15 14:59
참고 URL
짧은주소
- - 짧은주소: http://v2.eyoom.net/bbs/?t=3h3 주소복사
본문
웹사이트의 대부분의 내용이 구현은 완료되었으나, 클라이언트에서 오른쪽 메뉴하단의 공통메뉴영역을 퀵링크로 하여 접속자가 스크롤시 따라다니는 메뉴로 구성을 요청하였습니다.
부트스트랩에서 유사한 소스를 확인하여 적용하였는데, 스크롤을 최하단까지 내리면 퀵링크 영역이 Tail영역까지 침범을 합니다.
퀵링크가 좀 상단쪽으로 올라가면 될거 같은데...올라가지도 않구요...
혹시 수정할 방법이 있을까요?
아래의 소스는 Side_bs.html중 하단 메뉴 영역 부분을 수정한 것입니다.
<!--{* 사이드바 하단 메뉴 시작 *}-->
<div class="side-menu-bottom">
<nav class="col-sm-3" >
<div style=" margin-bottom:auto">
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="750" style="width:210px" >
<li class="active" style="font-size:16px; text-align:center; font-weight:bold;"><img src="../image/big_arrow_m.png" width="20px" style="margin-right:15px" />Quick Link<img src="../image/y_arrow.png" style="margin-left:15px" /></li>
<li><a href="{C.G5_BBS_URL}/board.php?bo_table=Noitce"><img src="../image/dot.png" style="margin-right:15px;">공지사항</a></li>
<li><a href="{C.G5_URL}/page/?pid=dive_package"><img src="../image/dot.png" style="margin-right:15px">다이빙패키지</a></li>
<li><a href="{C.G5_URL}/page/?pid=activity_price"><img src="../image/dot.png" style="margin-right:15px">Activity</a></li>
<li><a href="{C.G5_BBS_URL}/board.php?bo_table=qa"><img src="../image/dot.png" style="margin-right:15px">예약문의</a></li>
<li><a href="https://www.facebook.com/junkim0326" target="_blank"><img src="../image/facebook_icon.png" style="margin-right:15px">Facebook</a></li>
</ul>
</div>
</nav>
</div>
<!--{* 사이드바 하단 메뉴 끝 *}-->
0
좋아요!
레벨 2
경험치 475
Progress Bar 69%
- 가입일 : 2016-12-06 11:28:56
- 서명 :
- 자기소개 :
댓글목록
디폴트님의 댓글
관련 소스를 사용치 않아서 올바른 답변이 될 지 모르겠지만 참고하세요
data-offset-top="750" 을 data-offset-bottom="적당값"으로 수정하시면 하단을 기준으로 나타나지 않을 생각됩니다.
관련 정보 : http://www.w3schools.com/Bootstrap/bootstrap_affix.asp
축하합니다. 첫댓글 포인트 62포인트를 획득하였습니다.
이군이죠님의 댓글
댓글 달아주셔서 감사합니다.
적용해봤는데, 스크롤이 부드럽게 이동하는게 되었는데, 하단 영역까지 넘어가는건 여전하네요.
그래도 퀵링크가 갑자기 이동하는건 잡았습니다.
감사합니다.
이군이죠님의 댓글
감사합니다. 덕분에 해결했습니다.
스타일시트에서 atfix에 값을 주니 되었습니다.
정말정말 감사합니다.