導航欄實現之滾動條，本博客的滾動條的其中一部分細節就是這個

<style>
    .greyBox{position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: #ccc;opacity: 0.6;display: none;z-index: 8888;}
    .productionBox{position: fixed;width: 600px;top: 10%;left: 50%;margin-left: -300px;border: 1px solid #e3e5f1;background-color: #fff;display: none;z-index: 9999;}
    .title{width: 600px;text-align: center;height: 40px;line-height: 40px;font-size: 18px;font-weight: bold;}
    .butBox{margin:15px;}
    .butBox .addOnly{width: 80px;margin-right: 15px;margin-bottom: 10px;}
    .addMain .inputBox{padding-left: 15px;margin-top: 10px;}
    .addMain .inputBox input{width: 45%;height: 25px;line-height:25px;font-size: 16px;margin-left: 5px;margin-right: 5px;}
    .h1Offset{
    	font-size: 14px;
    	padding-left: 5px;
    }
    .h1Offset,a{
    	color: black;
    }
    .h2Offset{
    	font-size: 12px;
    	padding-left: 32px;
    }
    .h2Offset,a{
    	color: black;
    }
</style>
<!--隱藏的遮罩層-->
<div class="greyBox"></div>
<!--隱藏的生產批次選擇窗口-->
<!-- 為了便於測試，設置最大高度200px時，出現滾動條 -->
<div class="productionBox" style="overflow-y: auto;overflow-x: auto; max-height:200px;"> 
    <div class="title">文件主題</div>
    <hr style="border: 1px dashed #ecf1f5;"/>
    <div class="butBox">
        <button class="addOnly addProduction">添加1級</button>
        <button class="addOnly addProduction2">添加2級</button>
        <button class="addOnly delProduction">刪除</button>
    </div>
    <div class="addMain">
    </div>
</div>
<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
<script type="text/javascript">
  $(function () {
      $(".greyBox").show();//遮罩顯現
      $(".productionBox").show();
	  // 添加1級導航按鈕觸發事件，這邊寫死，實際場景中是動態的，3是動態的，SQL語句優化是動態的，2級導航同理
      $(".addProduction").on("click",function () {
          var str = ‘<li class="h1Offset"><span>3. </span><a href="#autoid-2-3-0" title="SQL語句優化">SQL語句優化</a><span class="sideCatalog-dot"></span></li>‘;
          $(".addMain").append(str);
      });
      // 添加1級導航按鈕觸發事件
      $(".addProduction2").on("click",function () {
          var str = ‘<li class="h2Offset"><span>3.1. </span><a href="#autoid-2-3-1" title="SQL語句優化">show參數</a><span class="sideCatalog-dot"></span></li>‘;
          $(".addMain").append(str);
      });
	  // 刪除按鈕觸發事件
      $(".delProduction").on("click",function () {
          $(".addMain").children(":last").remove();
      });
  })
</script>

導航欄實現