ㄧ.導欄列位置固定

<div class="component demo" style="height:300vh">
  <nav class="navbar sticky-top navbar-expand-md navbar-light bg-light">
    <a href="#" class="nav-bar-brand">ninghao</a>
    <button class="navbar-toggler" data-toggle="collapse" data-target="#navbar-content">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbar-content">
      <ul class="navbar-nav">
        <li class="nav-item"><a href="#" class="nav-link">學習</a></li>
        <li class="nav-item"><a href="#" class="nav-link">社區</a></li>
        <li class="nav-item"><a href="#" class="nav-link">博客</a></li>
      </ul>
    </div>
    
  </nav>
</div>



.demo.component{
  padding: 50px;
  padding-top: 80vh;
}

重點：

1.nav的.sticky-top需要在上面有個圖片會是留白，捲軸拉下來導欄列會固定在頂部
2. .sticky-top可改成.fixed-top直接固定頂部
3.加入頂端內留白是為了模擬上面有廣告等等之類的，拉下捲軸讓導欄列固定到頂端

codepen
參考：bootstrap4