Bootstrap框架动态生成Web页面文章内目录的方法

$('#nav').affix({
  offset: {
          :$('header').offset().,
      bottom: ($('footer').outerHeight(true) + 
        $('.application').outerHeight(true)) + 40
    }
});

<ul id="mysidebar" class="nav affix" >
</ul>

 ;$.fn.extend({
    "createAffix": function(selector) {
      $list = $("" + selector),
        length = $list.length,
        affixValue = "";
      for (var i = 0; i < length; i++) {
        //给每一个标题增加name属性
        $list.eq(i).attr("id", ("node" + i));
        var text = $list.eq(i).text();
        if (i == 0) {
          affixValue += "<li><a href=#node" + i + " class='active' >" + text + "</a></li>";
        } else {
          affixValue += "<li><a href=#node" + i + ">" + text + "</a></li>";
        }
      }
      this.append(affixValue);
      this.affix({
        offset: {
          : this.offset().//在固定之后距离顶部的偏移量
        }
      });
      return this;
    }

 });

 <ul id="mysidebar" class="nav affix" >
 <li><a href="#node1"></a></li>
 <li><a href="#node2"></a></li>
 <li><a href="#node3"></a></li>
 </ul>

 <h3 id="node1">标题1</h3>
 <h3 id="node2">标题2</h3>
 <h3 id="node3">标题3</h3>

 $(function(){
 $(' #mysidebar').createAffix('h3');
 //表示在文章中，使用`h3`标签的是 需要被添加锚点的地方。
 });

.class{
    /
    添加padding可以让锚点向下偏移num px，也就是跳过菜单栏的高度，
    通过设置margin-为负值来`弥补`因为padding-带来的空白部分
    /
    padding-: num px;
    margin-: -num px;
}

<ul id="mysidebar" class="nav affix" >
<li><a href="#node1"></a></li>
<li><a href="#node2"></a></li>
<li><a href="#node3"></a></li>
</ul>

<ul id="mysidebar" class="nav affix uk-nav uk-nav-side" data-uk-scrollspy-nav="{closest:'li',smoothscrool:true}" >
<li><a href="#node1"></a></li>
<li><a href="#node2"></a></li>
<li><a href="#node3"></a></li>
</ul>

$(function(){
$(' #mysidebar').createAffix('h3');//生成菜单
$.getScript("uikit.min.js");//异步载入uikit.min.js，滚动监听生效。
});