質問: ・・・ 見出し2 ----- ・・・ 見出し3 ----- ・・・ このページはかなり縦長のページになっており、下にスクロールした際に現在表示している位置(例えば、見出し1と見出し2の間を表示している場合の位置)によって 目次の該当箇所のタグにselectedのようなクラスを追加したいです。 よろしくお願いします。
回答: こんばんは、 こんなかんじでしょうか? ie では、うごきません。firefox でうごきました。 array.reduce, document.queryselector(all), classlist がつかえないとだめです。 いちのかんちは、たいまーをつかいました。 ぜんかくくうはくは、はんかくにしてください。 body { padding-left:8em; } #toc { position:fixed; left : 0; } p { height : 20em; } a.selected { border-bottom: 2px red solid; color : red; } * 見出し1* 見出し2* 見出し3 見出し1 ==== 12345 見出し2 12345 見出し3 12345 //対象のアンカータグを集める var a = document.queryselectorall ('div#toc > ul > li > a'); //対象のstyle.top の絶対値を求める var b = function (c) { for (var d = 0; c; c = c.offsetparent) d += c.offsettop; return d; }; //aで集めた.helf をidとした要素を集め、b() を求め、配列にする var c = array.prototype.reduce.call (a, function (d, e) { var f = e.getattribute ('href'), g; if (/^#.+$/.test (f)) if (g = document.queryselector (f)) d.push ({ e: e, height: b (g) }); return d; }, []); var offset = 20; var d = function () { var f = 0, g = window.pageyoffset + offset, h; for (var i = c.length; h = c[--i]; ) h.e.classlist(f += h.height <= g) === 1 ? 'add': 'remove'; }; setinterval (d, 500);