判断当前标题距离顶部的距离. 如果当前标题距离顶部小于5px 那就高亮当前标题. 大于5px 就高亮 上一个标题…

查找当前屏幕的 所有标题. 或者是各个标题 的坐标?? 每个标题到浏览器顶部的距离算除了. 如果有值的话 就是在当前屏幕内.没有值就不管.. 滚动事件…

$(selector).offset().top

如果第一个标题 距离顶部 小于5px 那就高亮这个标题. 否则就高亮上一个标题. 重点就是 怎么查找当前屏幕的元素…

文章目录 是 很多 li

默认 calss 没有值. 文章滚动到对应标题 class 添加on属性.

看博客源码.. js 只有两个

main.js 和 post.js

main.js 很短… 应该是 滚动用到最顶部用 的….

高亮方法:

m = $(window).scrollTop(); n = $(“h1”).text()

h = ‘<ul><li class=”h1”><a href=”#”>’ + n + “</a></li>”; l = h.length;

eq 选择器

选取带有指定 index 值的元素…. 选择第二个 <p> 元素: $(“p:eq(1)”)

只要滚动事件发生:

前一个 li 移除 on 属性. 下一个 li 增加 on 属性.

$(window).load(function() {
var h = [];
$.each($("#menuIndex li a"), function(k, l) {
  var j = $(l).attr("data-id") ? "#" + $(l).attr("data-id") : "h1";
  var m = $(j).offset().top;
  h.push(m)
});
var i = $("#menuIndex").offset().top;
var g = $("#menuIndex").offset().left;
$(window).scroll(function() {
  b(function() {
var m = $(window).scrollTop();
var l = h.length;
var j;
if (m + 20 > i) {
  $("#menuIndex").css({
position: "fixed",
top: "20px",
left: g
  })
} else {
  $("#menuIndex").css({
position: "static",
top: 0,
left: 0
  })
}
if (m + 60 > h[l - 1]) {
  j = l
} else {
  for (var k = 0; k < l; k++) {
if (m + 60 <= h[k]) {
  j = k;
  break
}
  }
}
$("#menuIndex li").removeClass("on");
$("#menuIndex li").eq(j - 1).addClass("on")
  })
});