Implementation code:
<! DOCTYPE HTML > < HTML > <head> <meta charset=" UTF-8 "> <title>Bootstrap instance - Scrollspy plugin </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, <style type=" text-align ">.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.6 em. The font - size: 1.3 em. 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 "> Active rule </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: [[" Rule title 1", "Rule Title 1"," Rule Title 2", [" Rule Title 2", "Rules content rules content 2 content 2 2 2 rules content 2 rules content rules content 2 2 rules content 2 rules content rules content 2 content 2 2 2 rules content 2 rules content rules content 2 content 2"], [" rules of the title 3 ", "Rules of the title 3 rules title 3 title 3 rules title 3 title 3 regulations title 3 title 3 title 3 regulations title 3 rules title 3 title 3 rules title 3 rules title 3 title 3"]]}}) < / script > < / body > < / HTML >Copy the code