Bootstrap affix won't change active tab

Question

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

Answer 1

Finally, I found it's because the former marked with attributes data-spy="scroll" data-target="#myScrollspy" was now on a div element.

I deleted the body tag because the former HTML has two body tag, the first one is set in the base template, and the second one is written in HTML to bind bootstrap affix. So bootstrap affix doesn't work after I change the second body tag to div .

TL,NR: It fixed after I add attributes data-spy="scroll" data-target="#myScrollspy" to body element.