右侧导航栏(动态添加数据到list)

页面样式

<style>
            .scroll {
                position: fixed;
                right: 5%;
                top: 5em;
                background: #ccc;
                display: none;
            }
            
            .scroll ul {
                list-style: none;
                margin: 0;
                padding: 0;
                list-style: none;
                border: 0;
            }
            
            a {
                outline: none;
                text-decoration: none;
                tap-highlight-color: rgba(0, 0, 0, 0);
                -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
                -moz-tap-highlight-color: rgba(0, 0, 0, 0);
                -ms-tap-highlight-color: rgba(0, 0, 0, 0);
                -o-tap-highlight-color: rgba(0, 0, 0, 0);
                color: #3c3c3c;
            }
        </style>

 

页面

右侧的导航栏的list

<div class="scroll">
      <ul id="list">                                
      </ul>
</div>

 

js

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
    $(function() {
        $(window).scroll(function() {
            if(document.body.scrollTop > 500) {//当滚动条滑倒500px是出现列表
                $(".scroll").css("display", "block")
            }            
        })        
        var IdList=[];//定义一个空的数组
        var a = $("body h2")//取到整个body里的h2     
        for (var j = 1;j < a.length;j++ ) {//循环出来
            IdList.push(a.eq(j).attr('id'))    //将取到id值push到空数组里
        }
        var result = "";
        for(var i = 0; i < IdList.length; i++) {//循环添加到li标签里
            console.log(IdList[i])//控制台打印出来自己检查
            result += "<li><a href='#" + IdList[i] + "'>" + IdList[i] + "</a></li>"
        }
        $("#list").append(result)//将li插入ul里面
    })
</script>