Amaze UI

ScrollSpyNav


适用于页面内导航,窗口滚动时,锚点对应的链接添加高亮样式类(.am-active)。

基础用法

北京市介绍

北京,简称“京”,中华人民共和国首都、直辖市、国家中心城市、超大城市,全国政治中心、文化中心、国际交往中心、科技创新中心,是中国共产党中央委员会、中华人民共和国中央人民政府和全国人民代表大会的办公所在地,中国中部战区司令部驻地。 北京位于华北平原北部,背靠燕山,毗邻天津市和河北省。北京的气候为典型的北温带半湿润大陆性季风气候。 北京是首批国家历史文化名城和世界上拥有世界文化遗产数最多的城市,三千多年的历史孕育了故宫、天坛、八达岭长城、颐和园等众多名胜古迹。早在七十万年前,北京周口店地区就出现了原始人群部落“北京人”。公元前1045年,北京成为蓟、燕等诸侯国的都城。公元938年以来,北京先后成为辽陪都、金中都、元大都、明清国都。1949年10月1日成为中华人民共和国首都。

成都市介绍

成都,简称蓉,四川省省会、副省级市,中国西南地区的科技、商贸、金融中心和交通枢纽[1] ,国家重要的高新技术产业基地、商贸物流中心和综合交通枢纽、西部地区重要的中心城市[2] 。 成都位于四川盆地西部,成都平原腹地,境内地势平坦、河网纵横、物产丰富、农业发达,自古就有“天府之国”的美誉。成都下辖11个市辖区、4个县,代管5个县级市。截至2015年末,成都总面积14605平方千米,全市建成区面积1006.7平方公里,常住人口1572.8万,城镇人口640万,城镇化率70.3%[3] ,是西部地区唯一的特大城市。 成都是中国五大战区之一的西部战区司令部驻地[4] ,是西部地区设立外国领事馆数量、开通国际航线数量最多的城市[5] ,是联合国教科文组织命名的世界美食之都[6] 。

上海市介绍

上海,简称“沪”或“申”,是中华人民共和国直辖市,国家中心城市,超大城市,中国的经济、交通、科技、工业、金融、贸易、会展和航运中心,首批沿海开放城市。地处长江入海口,隔东中国海与日本九州岛相望,南濒杭州湾,北、西与江苏、浙江两省相接。[1-3] 春秋战国时期,上海是楚国春申君黄歇的封邑,故上海别称申。四、五世纪的晋朝时期,因渔民创造捕鱼工具“扈”,江流入海处称“渎”,因此松江下游一带被称为“扈渎”,以后又改“沪”,故上海简称沪。[4] 唐天宝年间始有县制。宋代始有“上海”之名。元朝始设上海县,标志着上海建城之始。[5] 上海是国家历史文化名城,拥有深厚的近代城市文化底蕴和众多历史古迹。江南吴越文化与西方传入的工业文化相融合形成上海特有的海派文化。[6-7] 1843年后上海成为对外开放的商埠并迅速发展成为远东第一大城市。[8-9] 上海市总面积6340平方公里,辖16个市辖区,属亚热带湿润季风气候,四季分明,日照充分,雨量充沛。[10]

重庆市

重庆,简称巴或渝,位于中国西南部,是中国中央直辖市、国家重要的中心城市[1] 、超大城市、国际大都市,长江上游地区经济、金融、商贸物流、科技创新和航运中心,[2] 西南地区综合交通枢纽和最大的工商业城市[3] ,国家重要的现代制造业基地,全国统筹城乡综合配套改革试验区;[1] 西部开放开发战略支撑和长江经济带西部中心枢纽;东邻湖北、湖南,南靠贵州,西接四川,北连陕西。

Copy
<style>
  .scrollspy-nav {
    top: 0;
    z-index: 100;
    background: #5085FF;
    width: 100%;
    padding: 0 10px;
    border-radius: 6px;
  }

  .scrollspy-nav ul {
    margin: 0;
    padding: 0;
  }

  .scrollspy-nav li {
    display: inline-block;
    list-style: none;
  }

  .scrollspy-nav a {
    color: #fff;
    padding: 10px 20px;
    display: inline-block;
  }

  .scrollspy-nav a.am-active {
    color: #fff;
    font-size: 18px;
    font-weight: bold;
  }

  .am-panel {
    margin-top: 20px;
  }

</style>
<nav class="scrollspy-nav" data-am-scrollspynav="{offsetTop: 45}" data-am-sticky>
  <ul>
    <li><a href="#beijing">北京市</a></li>
    <li><a href="#chengdu">成都市</a></li>
    <li><a href="#shanghai">上海市</a></li>
    <li><a href="#chongqing">重庆市</a></li>
  </ul>
</nav>

<div class="am-panel am-panel-default" id="beijing">
  <div class="am-panel-hd">北京市介绍</div>
  <div class="am-panel-bd">
    <p>北京,简称“京”,中华人民共和国首都、直辖市、国家中心城市、超大城市,全国政治中心、文化中心、国际交往中心、科技创新中心,是中国共产党中央委员会、中华人民共和国中央人民政府和全国人民代表大会的办公所在地,中国中部战区司令部驻地。
北京位于华北平原北部,背靠燕山,毗邻天津市和河北省。北京的气候为典型的北温带半湿润大陆性季风气候。
北京是首批国家历史文化名城和世界上拥有世界文化遗产数最多的城市,三千多年的历史孕育了故宫、天坛、八达岭长城、颐和园等众多名胜古迹。早在七十万年前,北京周口店地区就出现了原始人群部落“北京人”。公元前1045年,北京成为蓟、燕等诸侯国的都城。公元938年以来,北京先后成为辽陪都、金中都、元大都、明清国都。1949年10月1日成为中华人民共和国首都。 </p>
  </div>
</div>


<div class="am-panel am-panel-default" id="chengdu">
  <div class="am-panel-hd">成都市介绍</div>
  <div class="am-panel-bd">
    <p>成都,简称蓉,四川省省会、副省级市,中国西南地区的科技、商贸、金融中心和交通枢纽[1]  ,国家重要的高新技术产业基地、商贸物流中心和综合交通枢纽、西部地区重要的中心城市[2]  。
成都位于四川盆地西部,成都平原腹地,境内地势平坦、河网纵横、物产丰富、农业发达,自古就有“天府之国”的美誉。成都下辖11个市辖区、4个县,代管5个县级市。截至2015年末,成都总面积14605平方千米,全市建成区面积1006.7平方公里,常住人口1572.8万,城镇人口640万,城镇化率70.3%[3]  ,是西部地区唯一的特大城市。
成都是中国五大战区之一的西部战区司令部驻地[4]  ,是西部地区设立外国领事馆数量、开通国际航线数量最多的城市[5]  ,是联合国教科文组织命名的世界美食之都[6]  。</p>
  </div>
</div>

<div class="am-panel am-panel-default" id="shanghai">
  <div class="am-panel-hd">上海市介绍</div>
  <div class="am-panel-bd">
    <p>上海,简称“沪”或“申”,是中华人民共和国直辖市,国家中心城市,超大城市,中国的经济、交通、科技、工业、金融、贸易、会展和航运中心,首批沿海开放城市。地处长江入海口,隔东中国海与日本九州岛相望,南濒杭州湾,北、西与江苏、浙江两省相接。[1-3]
春秋战国时期,上海是楚国春申君黄歇的封邑,故上海别称申。四、五世纪的晋朝时期,因渔民创造捕鱼工具“扈”,江流入海处称“渎”,因此松江下游一带被称为“扈渎”,以后又改“沪”,故上海简称沪。[4]  唐天宝年间始有县制。宋代始有“上海”之名。元朝始设上海县,标志着上海建城之始。[5]  上海是国家历史文化名城,拥有深厚的近代城市文化底蕴和众多历史古迹。江南吴越文化与西方传入的工业文化相融合形成上海特有的海派文化。[6-7]  1843年后上海成为对外开放的商埠并迅速发展成为远东第一大城市。[8-9]
上海市总面积6340平方公里,辖16个市辖区,属亚热带湿润季风气候,四季分明,日照充分,雨量充沛。[10] </p>
  </div>
</div>

<div class="am-panel am-panel-default" id="chongqing">
  <div class="am-panel-hd">重庆市</div>
  <div class="am-panel-bd">
        <p>重庆,简称巴或渝,位于中国西南部,是中国中央直辖市、国家重要的中心城市[1]  、超大城市、国际大都市,长江上游地区经济、金融、商贸物流、科技创新和航运中心,[2]  西南地区综合交通枢纽和最大的工商业城市[3]  ,国家重要的现代制造业基地,全国统筹城乡综合配套改革试验区;[1]  西部开放开发战略支撑和长江经济带西部中心枢纽;东邻湖北、湖南,南靠贵州,西接四川,北连陕西。</p>
  </div>
</div>

添加 data-am-scrollspynav 属性,并设置相关选项。

在线运行

调用方式

JS 调用

通过 $().scrollspynav(options) 调用。

选项说明

选项描述
options.className.activeString,高亮导航条类名,默认为 am-active
options.smoothBoolean,点击锚点时平滑滚动,默认为 true
options.offsetTopNumber,滚动时顶部偏移量,默认为 0

通过 Data API 设置时,代码为 data-am-scrollspynav="{className: {active: 'am-active'}}"