위키
포럼
도구
바뀐글
랜덤

부트스트랩 Scrollspy

부트스트랩 Scrollspy
부트스트랩 스크롤스파이

1 예시[ | ]

html
Copy
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/latest/js/bootstrap.min.js"></script>
 
<style>
body {
  position: relative;
}
ul.nav-pills {
  top: 20px;
  position: fixed;
}
.my-content {
  height: 400px;
  background: yellow;
}
</style>

<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">

<nav class="col-sm-2" id="myScrollspy">
  <ul class="nav nav-pills nav-stacked">
    <li class="active"><a href="#section1">섹션 1</a></li>
    <li><a href="#section2">섹션 2</a></li>
    <li><a href="#section3">섹션 3</a></li>
    <li><a href="#section4">섹션 4</a></li>
  </ul>
</nav>
<div class="col-sm-10">
  <div id="section1">    
    <h1>섹션 1</h1>
    <p class='my-content'>내용</p>
  </div>
  <div id="section2"> 
    <h1>섹션 2</h1>
    <p class='my-content'>내용</p>
  </div>        
  <div id="section3">         
    <h1>섹션 3</h1>
    <p class='my-content'>내용</p>
  </div>
  <div id="section4">         
    <h1>섹션 4</h1>
    <p class='my-content'>내용</p>
  </div>      
</div>

</body>
</html>

2 같이 보기[ | ]

3 참고[ | ]

원본 주소 "https://zetawiki.com/w/index.php?title=부트스트랩_Scrollspy&oldid=607136"