文章文档标题自动生成导航jQuery小插件titleNav.js

这篇文章发布于 2018年04月30日,星期一,15:41,归类于 jQuery相关。 阅读 26725 次, 今日 1 次 8 条评论

 

技术文档,或者一些官网首页,重展示,基本上都是一个<section>一个<section>的段落组成,每个段落会有一个标题,此时页面往往会很长很长,如果用户阅读时候关心的只是中间某个段落,则交互体验并不友好,此时,就需要有一个页面内的标题导航,用户直接点击导航菜单,就能定位到对应的标题,此时阅读起来就省心多了。

由于这种交互实现并不难,因此,以前我都是直接现写一段JS脚本满足功能。近期,我又遇到需要这样处理的交互场景,琢磨了下,从业这么久,这种交互现写的场景估计一个巴掌都数不过来了吧,以后估计还会遇到这样的交互场景,一不做二不休,有必要写个即插即用的方法。

我就陪小朋友玩耍完毕后花了几个小时迅速弄了下,写了个名为jquery.titleNav.js的jQuery小插件。

一、jQuery小插件titleNav.js效果演示与下载

您可以狠狠地点击这里:自动生成标题导航jQuery小插件demo

demo页面是copy的一段LuLu UI(http://l-ui.com)的“关于”文档,滚动页面,可以看到右上方的导航会自动从跟随滚动变成fixed固定定位,同时高亮(这里是加粗)对应的菜单选项。

固定定位且高亮的导航效果截图

下载(右键->另存为):jquery.titleNav.js

二、jQuery小插件titleNav.js使用

上面提供的demo页面的JS使用如下:

<script>
$('h3').titleNav();
</script>

就一行代码。

然后,需要下面的CSS配合:

.title-nav-ul {
    width: 200px;
    border: 1px solid #ccc;
    background-color: #fff;
    box-shadow: 1px 1px 3px rgba(0,0,0,.25);
    position: absolute;
    top: 200px; right: 10px;
}
.title-nav-li {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: inherit;
}
.title-nav-li.active {
    font-weight: bold;
}
.title-nav-li:hover {
    background-color: #f0f0f0;
}

实现的是右上方定位的垂直导航效果。

如果我们希望实现的是顶部定位的水平导航效果,则修改.title-nav-ul.title-nav-li这两个类名的样式即可,分别表示导航容器和导航列表。

API使用与说明

API如下:

$().titleNav(options);

其中,$()知道jQuery包装器对象,在这里特指标题元素。options为可选参数,具体见下表:

API名称 默认值 释义
nav null Object类型,表示导航元素。默认为null,表示不使用页面上的元素作为导航列表的容器,而是插件自己主动生成。
container $(window) Object类型。表示滚动容器元素,必须是jQuery包装器元素。默认为浏览器窗体滚动。
offsetTop 20 导航变成固定定位时候距离上边缘的距离大小。默认是20px。如果导航是吸附在浏览器顶部的,则值可以设置为0

关于自动生成的导航元素的DOM结构说明

自动生成的导航元素的DOM结构如下:

<div class="title-nav-ul">
  <a href="javascript:" class="title-nav-li active">一、为何叫LuLu?</a>
  <a href="javascript:" class="title-nav-li">二、为什么使用LuLu?</a>
  <a href="javascript:" class="title-nav-li">三、设计理念</a>
  <a href="javascript:" class="title-nav-li">四、滚动到底部我高亮</a>
</div>

高亮效果如下图:

代码高亮截图

可以看到有个类名active,这个就是用来标记当前哪个列表处于选中态的,用来控制导航的选中高亮效果,在本demo中就是单纯文字加粗。

其他说明

  • 导航中列表点击后的定位效果不需要额外写,插件已经帮忙完成了,且定位带动画哦~
  • 另外,如果滚动到底部,同时有多个标题,插件会自动定位到最后一个导航,做了相关的细节优化
  • 兼容IE8+以及其他现代浏览器,以及移动端(不保证所有设备都OK)。

三、结束语

插件写得匆忙,尚未细致测试,若使用过程中遇到问题,欢迎反馈,定当及时更新。

最后分享一首歌,田馥甄北京草莓音乐节献唱《南山南》——

你在南方的艳阳里,大雪纷飞
我在北方的寒夜里,四季如春
如果天黑之前来得及,我要忘了你的眼睛
穷极一生,做不完一场梦

祝五一快乐!

(本篇完)

分享到:


发表评论(目前8 条评论)

  1. vc说道:

    var rectTopContainer = isContainerWindow ? 0 : elContainer.children()[0].getBoundingClientRect().top 这个应该改成
    var rectTopContainer = isContainerWindow ? 0 : elContainer[0].getBoundingClientRect().top – elContainer.scrollTop();

  2. llq说道:

    h3数量很多,nav的长度超过页面高度,超过部分导航不生效

  3. SKY8G网说道:

    SKY8G网过来留言,文章不错,支持一下。

  4. nszbf说道:

    在前后端分离数据驱动的大势下..去选择使用这类框架的欲望明显太低了,而且类似的layer,bootstrap也都基本能解决业务了..

  5. liyang说道:

    你在南方的艳阳里,大雪纷飞
    我在北方的寒夜里,四季如春
    如果天黑之前来得及,我要挖了你的眼睛
    穷极一生,做不完一场梦

  6. 五号说道:

    可以嵌套子标题么

  7. 薛将军说道:

    手动占楼