29.Bootstrap(中文教程)元件：Scrollspy:滾動監控

yan-bootstrap4 bootstrap4(中文教程)

Ci_Yao_Yan 2020-04-13 14:57:43 ‧ 2142 瀏覽

分享至

ㄧ.滾動監控

<body data-spy="scroll" data-target="#nav-demo">
  <div class="component" id="demo">
  <div class="row">
    <div class="col-3">
      <ul id="nav-demo" class="nav nav-pills flex-column position-fixed bg-light p-3 text-right">
        <li class="nav-item"><a href="#html" class="nav-link active">HTML</a></li>        
        <li class="nav-item"><a href="#css" class="nav-link">CSS</a></li>
        <li class="nav-item"><a href="#javascript" class="nav-link">JavaScript</a></li>
      </ul>
    </div>
    <div class="col-9">
      <h3 id="html">Html</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate corrupti voluptates, doloribus labore optio velit?</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate corrupti voluptates, doloribus labore optio velit?</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate corrupti voluptates, doloribus labore optio velit?</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate corrupti voluptates, doloribus labore optio velit?</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate corrupti voluptates, doloribus labore optio velit?</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate corrupti voluptates, doloribus labore optio velit?</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate corrupti voluptates, doloribus labore optio velit?</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate corrupti voluptates, doloribus labore optio velit?</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate corrupti voluptates, doloribus labore optio velit?</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate corrupti voluptates, doloribus labore optio velit?</p>
      <h3 id="css">Css</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate corrupti voluptates, doloribus labore optio velit?</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate corrupti voluptates, doloribus labore optio velit?</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate corrupti voluptates, doloribus labore optio velit?</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate corrupti voluptates, doloribus labore optio velit?</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate corrupti voluptates, doloribus labore optio velit?</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate corrupti voluptates, doloribus labore optio velit?</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate corrupti voluptates, doloribus labore optio velit?</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate corrupti voluptates, doloribus labore optio velit?</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate corrupti voluptates, doloribus labore optio velit?</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate corrupti voluptates, doloribus labore optio velit?</p>
      <h3 id="javascript">JavaScript</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate corrupti voluptates, doloribus labore optio velit?</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate corrupti voluptates, doloribus labore optio velit?</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate corrupti voluptates, doloribus labore optio velit?</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate corrupti voluptates, doloribus labore optio velit?</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate corrupti voluptates, doloribus labore optio velit?</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate corrupti voluptates, doloribus labore optio velit?</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate corrupti voluptates, doloribus labore optio velit?</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate corrupti voluptates, doloribus labore optio velit?</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate corrupti voluptates, doloribus labore optio velit?</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate corrupti voluptates, doloribus labore optio velit?</p>      
    </div>
  </div>
</div>
</body>



.demo.component{
  padding: 50px;
}

重點：

1.在col-3先做一個導欄列，position-fixed一定要固定
2.後需要在col-9內容加入html與css以及javascript的id
3.重要的是要在導欄列的a連結href加入#html與#css以及#javascript
4.在body這層加入data-spy="scroll" data-target="#nav-demo"才會有滾動監控的效果
5.必須用在 Bootstrap 導覽元件或列表群組
6.滾動監控需要在你所監控的元素上使用 position: relative;，通常是body。

codepen
參考：bootstrap4