BS3
Scrollspy 예제 - 상단고정메뉴
...
<style>
body {position: relative; }
#section1 {padding-top:50 px;height:500px;color: #fff; background-color: #1E88E5;}
#section2 {padding-top:50 px;height:500px;color: #fff; background-color: #673ab7;}
#section3 {padding-top:50 px;height:500px;color: #fff; background-color: #ff9800;}
#section41 {padding-top:50 px;height:500px;color: #fff; background-color: #00bcd4;}
#section42 {padding-top:50 px;height:500px;color: #fff; background-color: #009688;}
</style>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50 " >
<nav class="navbar navbar-inverse navbar-fixed-top ">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">홈짱닷컴</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar
<ul class="nav navbar-nav ">
<li><a href="#section1" >HTML</a></li>
<li><a href="#section2" >CSS</a></li>
<li><a href="#section3" >JS</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">서버측 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#section41" >PHP</a></li>
<li><a href="#section42" >SQL</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
<div id="section1" class="container-fluid">
<h1>HTML</h1>
<p>뼈대</p>
</div>
<div id="section2" class="container-fluid">
<h1>CSS</h1>
<p>디자인</p>
</div>
<div id="section3" class="container-fluid">
<h1>JS</h1>
<p>동작기능</p>
</div>
<div id="section41" class="container-fluid">
<h1>PHP</h1>
<p>웹서버와 DB 중계처리</p>
</div>
<div id="section42" class="container-fluid">
<h1>SQL</h1>
<p>DB관리</p>
</div>
</body>
...
결과보기
[코드설명]
data-spy="scroll"
"스크롤가능영역"으로 사용해야하는 요소에 추가. (보통, body 요소)position:relative 속성 필요.
메뉴 링크타겟(href="#section1 ")과 스크롤요소의 아이디(id="section1" )가 대응되는지 확인.
data-target=".navbar"
네비게이션바의 (class 또는 ID) 입력. 네이게이션바가 "스크롤가능영역"과 연결되었는지 확인.
data-offset="50"
스크롤 위치 계산할 때, 위에서 오프셋 할 픽셀수 지정. (기본값: 10)
스크롤요소로 이동할 때 메뉴바 링크 활성상태가 너무 빨리 바뀐다 여겨질 때 설정하면 유용.
Scrollspy 예제 - 좌측고정메뉴
...
<head>
...
<style>
body { position: relative;}
ul.nav-pills {
top: 20px;
position: fixed;
}
div.col-sm-9 div {
height: 250px;
font-size: 28px;
}
#section1 {color: #fff; background-color: #1E88E5;}
#section2 {color: #fff; background-color: #673ab7;}
#section3 {color: #fff; background-color: #ff9800;}
#section41 {color: #fff; background-color: #00bcd4;}
#section42 {color: #fff; background-color: #009688;}
@media screen and (max-width:750px ) {
#section1, #section2, #section3, #section41, #section42 {
margin-left: 0px;
}
}
</style>
</head>
<body data-spy="scroll" data-target="# myScrollspy " data-offset="20" >
<div class="container">
<div class="row">
<nav class="col-xs-4 col-sm-3" id="myScrollspy ">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#section1">HTML</a></li>
<li><a href="#section2">CSS</a></li>
<li><a href="#section3">JS</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">서버측<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#section41">PHP</a></li>
<li><a href="#section42">SQL</a></li>
</ul>
</li>
</ul>
</nav>
<div class="col-xs-8 col-sm-9" >
<div id="section1" >
<h1>HTML</h1>
<p>뼈대</p>
</div>
<div id="section2" >
<h1>CSS</h1>
<p>디자인</p>
</div>
<div id="section3" >
<h1>JS</h1>
<p>동작기능</p>
</div>
<div id="section41" >
<h1>PHP</h1>
<p>웹서버와 DB 중계</p>
</div>
<div id="section42" >
<h1>SQL</h1>
<p>DB</p>
</div>
</div>
</div>
</div>
</body>
...
결과보기
※ Grid 관련 CSS 이용.
JS Scrollspy
Scrollspy 플로그인
아래 파일 중 하나 필요.
개별: scrollspy.js
통합: bootstrap.js (또는, bootstrap.min.js)
Scrollspy 방법1 - data-* 속성 이용
<!-- The scrollable area -->
<body data-spy="scroll" data-target=".navbar " data-offset="50" >
<!-- 메뉴바 -->
<nav class="navbar navbar-inverse navbar-fixed-top">
...
<ul class="nav navbar-nav">
<li><a href="#section1 ">Section 1</a></li>
...
</nav>
<!-- 섹션1 -->
<div id="section1
<h1>홈짱닷컴</h1>
<p>Homzzang.com</p>
</div>
...
</body>
Scrollspy 방법2 - JS 이용
<body>
....
<script>
$(document).ready(function(){
$('body').scrollspy({target: ".navbar", offset: 50});
});
</script>
Scrollspy Option(옵션)
offset
스크롤 위치 계산할 때 위에서 오프셋 (= 스크롤 시작점 변경) 할 픽셀수 지정.
옵션값 유형: number (기본값: 10)
Scrollspy Method (메서드)
.scrollspy("refresh")
scrollspy에서 요소 추가/제거할 때, 문서 새로고침 가능.
Scrollspy Event (이벤트)
activate.bs.scrollspy
scrollspy에 의해 새 항목이 활성화 될 때 발생.
Scrollspy + Amination Scroll (애니스크롤)
<script>
$(document).ready(function(){
$('body').scrollspy({target: ".navbar", offset: 50});
$("#myNavbar a
if (this.hash !== "") { // 기본동작 재정의 전, this.hash에 값 있는지 체크.
event.preventDefault(); // <a> 태그 기본동작 차단.
var hash = this.hash; // this.hash 값을 hash 변수에 저장.
$('html, body').animate( {scrollTop : $(hash).offset() .top} , 800 // 이동 시 800밀리초 소요. , function(){window.location.hash = hash;} // 스크롤 완료 후 URL에 hash 추가. );
} // End if
}); // End on
});
</script>
예제보기
