Bootstrap affix won't change active tab

The code is written by a former front-end developer of my company. After he left, I was asked to edit this page. When I finished working on CSS, I found the affix which formerly worked, will always activate the last li element. I tried a lot of ways but have no idea why this is happening.

Example code:

<ul id="myNav" class="nav nav-tabs nav-stacked">
  <li><a href="#section-1">关于Speed Dating</a></li>
  <li><a href="#section-2">活动流程</a></li>
  <li><a href="#section-3">成功案例</a></li>
  <li><a href="#section-4">往期回顾</a></li>
  <li><a href="#section-5">地点</a></li>
  <li><a href="#section-6">合作伙伴</a></li>
</ul>
......
<h2 id="section-1">关于Speed Dating</h2>
<h2 id="section-2">关于Speed Dating</h2>
......

The whole code is on CodePen