• 1. 青い夜の記憶 - 须藤ひとみ
  • 2. 念夏 - 马天宇
  • 3. 偏爱 - 张芸京
  • 4. エンド・タイトル-东京爱情故事
  • 5. 夜色 - 玉置浩二
  • 6. オセンチな歩美 - 大野克夫
  • 7. The_Godfather_Waltz/Speak_Softly_Medley - Jack_Jezzro
  • 8. 猫になりたい - スピッツ
  • 9. Love_Theme_from_Cinema_Paradiso - Jeff_Steinberg
  • 10. 時には昔の話を - 加藤登紀子
person

jQuery插件,自动生成文章目录索引,手风琴式折叠显示,自动定位当前位置。
headindex.png

二分法查找,应对目录量比较大的问题,比如做笔记的时候,一篇文章的目录可能会出现上百个的情况。

项目地址
查看演示

怎么使用?

step 1. 导入jqueryjquery.headindex

<script src="./js/jquery.3.3.1.js"></script>
<script src="../jquery.headindex.min.js"></script>
$(function () {
    $('.article-wrap').headIndex({
        articleWrapSelector: '.article-content',//包裹文章的元素的选择器
        indexBoxSelector: '.index-box',//用来放目录索引的元素的选择器
        //other options
    })
})

默认参数

defaultOptions = {
        articleWrapSelector: ".article-wrap",/*包裹文章的选择器*/
        indexBoxSelector: ".index-box",/*包裹目录索引的选择器*/
        scrollSelector: 'body,html',/*滑动元素的选择器*/
        scrollWrap: window,/*能够监听到scrollSelector滑动的选择器*/

        subItemBoxClass: "index-subItem-box",
        itemClass: "index-item",
        linkClass: "index-link",
        offset: 0,/*滑动偏移量 按需求进行偏移*/
}

注意

某些布局下,滚动时位置不准确的问题
这个需要自己手动适配一下,重写方法:

offsetTop: function (elem) {

届时,offset可能失效。

如果对您有帮助,欢迎给个star。

新评论