1 | const OFFSET = 150
|
2 |
|
3 | $().ready(() => {
|
4 | const wrapper = $('#side-nav')
|
5 |
|
6 | |
7 |
|
8 |
|
9 | const links = []
|
10 |
|
11 | if (!$('.vertical-section').length) {
|
12 | wrapper.hide()
|
13 | }
|
14 |
|
15 | $('.vertical-section').each((i, el) => {
|
16 | const section = $(el)
|
17 | const sectionName = section.find('> h1').text()
|
18 | if (sectionName) {
|
19 | wrapper.append($('<h3/>').text(sectionName))
|
20 | const list = $('<ul></ul>')
|
21 | section.find('.members h4.name').each((i, el) => {
|
22 | const navLink = $(el)
|
23 | const name = navLink.find('.code-name')
|
24 | .clone().children().remove().end().text()
|
25 | const href = navLink.find('a').attr('href')
|
26 | const link = $(`<a href="${href}" />`).text(name)
|
27 | list.append($('<li></li>').append(link))
|
28 | links.push({ link, offset: navLink.offset().top})
|
29 | })
|
30 | wrapper.append(list)
|
31 | }
|
32 | else {
|
33 | section.find('.members h4.name').each((i, el) => {
|
34 | const navLink = $(el)
|
35 | const name = navLink.find('.code-name')
|
36 | .clone().children().remove().end().text()
|
37 | const href = navLink.find('a').attr('href')
|
38 | const link = $(`<a href="${href}" />`).text(name)
|
39 | wrapper.append(link)
|
40 | links.push({ link, offset: navLink.offset().top})
|
41 | })
|
42 | }
|
43 | })
|
44 |
|
45 | if (!$.trim(wrapper.text())) {
|
46 | return wrapper.hide()
|
47 | }
|
48 |
|
49 | const core = $('#main-content-wrapper')
|
50 |
|
51 | const selectOnScroll = () => {
|
52 | const position = core.scrollTop()
|
53 | let activeSet = false
|
54 | for (let index = (links.length-1); index >= 0; index--) {
|
55 | const link = links[index]
|
56 | link.link.removeClass('is-active')
|
57 | if ((position + OFFSET) >= link.offset) {
|
58 | if (!activeSet) {
|
59 | link.link.addClass('is-active')
|
60 | activeSet = true
|
61 | } else {
|
62 | link.link.addClass('is-past')
|
63 | }
|
64 | } else {
|
65 | link.link.removeClass('is-past')
|
66 | }
|
67 | }
|
68 | }
|
69 | core.on('scroll', selectOnScroll)
|
70 |
|
71 | selectOnScroll()
|
72 |
|
73 | links.forEach(link => {
|
74 | link.link.click(() => {
|
75 | core.animate({ scrollTop: link.offset - OFFSET + 1 }, 500)
|
76 | })
|
77 | })
|
78 | }) |
\ | No newline at end of file |