实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 滚动监听（Scrollspy）插件</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js" type="text/javascript" charset="utf-8"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<style type="text/css">
.bg {
background: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 998;
}
.close {
z-index: 999;
position: fixed;
top: 12%;
left: 50%;
margin-left: -1em;
width: 2em;
}
.rule_block {
z-index: 999;
background: #FBE4DE;
color: #FCB482;
position: fixed;
top: 20%;
padding-bottom: 5em;
left: 6%;
width: 88%;
border-radius: 6px;
}
.rule_block_title {
text-align: center;
font-weight: bold;
margin-top: 1.6em;
font-size: 1.3em;
color: #FF8768;
}
.rule_block_centent {
margin-top: 2.6em;
height: 20em;
color: #FF8768;
width: 80%;
margin-left: 10%;
}
</style>
</head>
<body>
<div id="app">
<div data-spy="scroll" data-target="#navbar-example" data-offset="0" style="height:200px;overflow:auto; position: relative;">
<!--规则-->
<div v-if='rule_block_show' class="bg" @click="rule_block_show = false"></div>
<img v-if='rule_block_show' class="close" @click="rule_block_show = false" src="http://weixin.njkeren.cn/activity/h5-view/img/close.png" />
<div v-if='rule_block_show' class="rule_block">
<div id="rule_block" class="rule_block_title">
活动规则
</div>
<div class="rule_block_centent" data-spy="scroll" data-target="#navbar-example" data-offset="0" style="overflow:auto; position: relative;">
<span v-for="(item,index) in ruleList">
<p v-for="(in_i,idx) in item">{{idx==0?index+1+'.':''}}{{in_i}}</p>
</span>
</div>
</div>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
rule_block_show: true,
ruleList: [
["规则标题1", "规则内容规则内容规则内容规则内容规则内容规则内容规则内容规则内容规则内容规则内容规则内容规则内容规则内容规则内容规则内容规则内容规则内容"],
["规则标题2", "规则内容2规则内容2规则内容2规则内容2规则内容2规则内容2规则内容2规则内容2规则内容2规则内容2规则内容2规则内容2规则内容2规则内容2规则内容2规则内容2规则内容2规则内容2规则内容2"],
["规则标题3", "规则标题3规则标题3规则标题3规则标题3规则标题3规则标题3规则标题3规则标题3规则标题3规则标题3规则标题3规则标题3规则标题3规则标题3"]
]
}
})
</script>
</body>
</html>
