每天一个jquery插件-做锚点吸顶1
做锚点吸顶1
今天翻到一个经常见到的效果，特定找了找有没有参考的插件，就是类似于手风琴一半特效加锚点定位的效果吧，我试试看看能不能做出来，啊哈，水起。
目标如下
啥是锚点，可能你没注意过，但是绝对用过，可以理解为单一页面内对某个资源进行定位的操作，这里是相关大佬讲解，用过过网课答题的绝对见过角落里么错题记录榜，你选中一个错题就给你跳到指定位置，帮助快速找到目标题目用的那种效果，标准方式就是
<a href="#box1">我跳到box1</a>
<a href="#" name="#box2">我跳到box2</a>
<div id="box1"></div>
<div id="box2"></div>
然后啥又是手风琴，这其实就是一个经常用于菜单的特效方法，能够给用户满满的诚意，外加逼死那些喜欢一次性把所有菜单全部打开的强迫症，这里是参考地址
当然，上面讲到的这些东西，我可能都用不到（doge）
首先把可能应用到的场景做出来
一贯作风，先写参数然后实现效果，额，参数算了，只要有同一个类就标记一下，那就告诉我什么类需要标记就行了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>做锚点吸顶</title>
<script src="js/jquery-3.4.1.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
#main{
width:70%;
margin: 0 auto;
}
#main li{
margin-bottom: 400px;
}
</style>
</head>
<body>
<div id="main">
<ul>
<li class="mdxd">标题1</li>
<li class="mdxd">标题2</li>
<li class="mdxd">标题3</li>
<li class="mdxd">标题4</li>
<li class="mdxd">标题5</li>
<li class="mdxd">标题6</li>
<li class="mdxd">标题7</li>
<li class="mdxd">标题8</li>
<li class="mdxd">标题9</li>
</ul>
</div>
</body>
</html>
<script>
var mdxd = zmdxd("mdxd")
var zmdxd = function(cls){
}
</script>
然后后面该怎么做我想想先，然后找到所有的这个类的dom，记录所有节点的页面高度，然后把左边的标记生成出来，还有那个图片中像链子把每个标题串在一起的效果我盲猜是一个div的边框，然后我在边框的样式中见过这种效果，所以所有的标签我应该用一个辅助容器放进去，然后根据当前页面的高度驱动左边标记的运动情况，此外就是每个标记点击跳转到指定位置。
今天先水到这里，每天实现。