想实现类似掘金给文章生成一个目录
已经实现的效果
我把已经实现的代码贴进来大佬们觉得这个插件不错的话帮忙改改吧，我很喜欢这个，但是我不会代码 下面代码已经实现了部分效果待决绝的问题是让目录的滚动条给随内容滚动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- <link rel="stylesheet" href="./css/main.css" /> -->
<title>目录锚点定位</title>
<style>
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
:root {
--accent-color: #45494E;
--gradient-color: #FBFBFB;
}
.menu {
position: sticky;
top: 50px;
left: 200px;
width: 299px;
max-height: 500px;
font-size: 12px;
z-index: 999;
}
.menu>ol {
overflow: auto;
height: 100%;
list-style: none;
padding: 0;
}
.active {
position: sticky;
top: 50px;
background: pink;
}
.menu>ol>li{
height: 50px;
}
.container-div {
margin: 0;
padding: 0;
}
.ccc {
padding: 0 250px;
height: 700px;
background: -webkit-linear-gradient(to bottom, #fda0856b, #f6d36585);
background: linear-gradient(to bottom, #fda0856b, #f6d36585);
}
.content2 {
padding: 0 250px;
height: 700px;
background: -webkit-linear-gradient(to bottom, #bff0986b, #6fd6ff85);
background: linear-gradient(to bottom, #bff0986b, #6fd6ff85);
}
.ccc:nth-child[odd] {
padding: 0 250px;
height: 700px;
background: -webkit-linear-gradient(to bottom, #ea8d8d6b, #a890fe85);
background: linear-gradient(to bottom, #ea8d8d6b, #a890fe85);
}
.ccc:nth-child(even) {
padding: 0 250px;
height: 700px;
background: -webkit-linear-gradient(to bottom, #d8b5ff6b, #1eae9885);
background: linear-gradient(to bottom, #d8b5ff6b, #1eae9885);
}
.xx{width: 100%;display: flex;}
.left{width: 30%;display: flex; }
.rrr{width: 70%;display: flex;}
.head{position: sticky;top: 0; height: 60px;width: auto;background: palegoldenrod;}
</style>
</head>
<body>
<div class="head"></div>
<div class="xx">
<div class="left">
<!-- <根据标题生成的目录在这里> -->
<nav id="menu" class="menu">
<ol id="catalogs" class="category">
<li id="content" class="menu-item active">
<h3>目录</h3>
</li>
</ol>
</nav>
</div>
<!-- 内容部分 -->
<div class="rrr">
<div class="content ">
<h1 class="ccc">h1</h1>
<h2 class="ccc">h2</h2>
<h3 class="ccc">h3</h3>
<h4 class="ccc">h4</h4>
<h5 class="ccc">h5</h5>
<h6 class="ccc">h6</h6>
<h1 class="ccc">h1h1h1h1h1h1h1</h1>
<h3 class="ccc">h3h3h3h3h3h3h3</h3>
<h3 class="ccc">h3h3h3h3h3h3h3</h3>
<h3 class="ccc">h3h3h3h3h3h3h3</h3>
<h1 class="ccc">h1看不见了怎么办？？？？？h1</h1>
<h2 class="ccc">h2 可是我不想用鼠标滑呀 h2</h2>
<h4 class="ccc">h4来个大佬帮帮我h4</h4>
<h4 class="ccc">h4怎么办h4</h4>
<h4 class="ccc">h4网上找了几天了没有解决h4</h4>
<h4 class="ccc">h4自己又不会写h4</h4>
<h4 class="ccc">h4@掘金jsh4</h4>
<h4 class="ccc">h4哭哭哭哭哭哭h4</h4>
<h4 class="ccc">h4研究一下看看能不能解决h4</h4>
<h4 class="ccc">h4右边内容滚动左边目录滚动条跟随滚动类似掘金的h4</h4>
<h1 class="ccc">13</h1>
<h1 class="ccc">14</h1>
<h1 class="ccc">15</h1>
<h1 class="ccc">16</h1>
<h1 class="ccc">17</h1>
<h1 class="ccc">18</h1>
<h1 class="ccc">19</h1>
<h1 class="ccc">20</h1>
</div>
</div>
<!-- 没有样式的目录可以自己写 -->
<nav class="">
<h3>目录</h3>
<ol class="category">
</ol>
</nav>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- 第一部分 -->
<script>
//目录的生成需要等待文章加载完成之后再生成。
var padding = [0, 20, 40, 60, 80, 100];//不同的标题等级缩进大小
$('.content').find('h1,h2,h3,h4,h5,h6').each(function(index, item) {
var that = $(this);
//原插件代码 $('<a name="c'+index+'"></a>').insertBefore(that);//插入锚点地址
$('<div class="text content' + index + '" ></div>').insertBefore(that); //插入锚点地址
var tagName = that[0].tagName.toLowerCase();
var tagIndex = parseInt(tagName.charAt(1)) - 1;//根据标题等级分类，并设置不同的缩进。
//原插件代码 $('#category').append($('<a href="#c'+index+'" style="padding-left:'+padding[tagIndex]+'px;display:block;">'+that.text()+'</a>'));
$('.category').append($('<li id="content' + index +'" class="menu-item "><a href="javascript:void(0)" style="padding-left:' + padding[tagIndex] + 'px;display:block;">' + that.text() + '</a></li>'));
});
</script>
<!-- 第二部分 -->
<!-- 这是两个插件拼凑成的，适配滚动高亮改了上面的两行代代码,我不懂所以写出来可以做参考 -->
<!-- $('.category').append($('<li id="content' + index +'" class="menu-item "><a href="javascript:void(0)" style="padding-left:' + padding[tagIndex] + 'px;display:block;">' + that.text() + '</a></li>')); -->
<!-- $('<div class="text content' + index + '" ></div>').insertBefore(that); //插入锚点地址 -->
<script>
$(function() {
$('ol li').click(function() {
// 页面平滑的滚动到相应的位置
scrollToTop($("." + $(this).attr("id")).offset().top)
})
// /* 监听滚动
$(document).scroll(function() {
if ($(document).height() <= (parseInt($(document).scrollTop() + 1) + $(window)
.height())) { //滚动条滑到底部啦
$("ol li").removeClass('active')
$("ol li:last").addClass('active')
return;
}
var top = $(document).scrollTop(); //滚动条距离顶部的高度
$(".text").each(function(i, item) {
if ($(this).offset().top <= top) {
$("ol li").removeClass('active')
$("#" + item.classList[1]).addClass('active');
}
})
});
})
/** 将滚动轴滚到相应位置 */
function scrollToTop(number) {
window.scrollTo({
top: number,
behavior: "smooth",
block: "nearest",
});
}
</script>
<script type="text/javascript">
</script>
</body>
</html>
`
