-
-
Notifications
You must be signed in to change notification settings - Fork 21
/
scrollspy.js
62 lines (52 loc) · 2.05 KB
/
scrollspy.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
export class ScrollSpy {
constructor(menu, options = {}) {
if (!menu) {
throw new Error('First argument is query selector to your navigation.')
}
if (typeof options !== 'object') {
throw new Error('Second argument must be instance of Object.')
}
let defaultOptions = {
sectionClass: '.scrollspy',
menuActiveTarget: 'li > a',
offset: 0,
hrefAttribute: 'href',
activeClass: 'active'
}
this.menuList = menu instanceof HTMLElement ? menu : document.querySelector(menu)
this.options = Object.assign({}, defaultOptions, options)
this.sections = document.querySelectorAll(this.options.sectionClass)
}
onScroll() {
const section = this.getSectionInView()
const menuItem = this.getMenuItemBySection(section)
if (menuItem) {
this.removeCurrentActive({ ignore: menuItem })
this.setActive(menuItem)
}
}
getMenuItemBySection(section) {
if (!section) return
const sectionId = section.getAttribute('id')
return this.menuList.querySelector(`[${this.options.hrefAttribute}="#${sectionId}"]`)
}
getSectionInView() {
for (let i = 0; i < this.sections.length; i++) {
const startAt = this.sections[i].offsetTop
const endAt = startAt + this.sections[i].offsetHeight
const currentPosition = (document.documentElement.scrollTop || document.body.scrollTop) + this.options.offset
const isInView = currentPosition > startAt && currentPosition <= endAt
if (isInView) return this.sections[i]
}
}
setActive(activeItem) {
const isActive = activeItem.classList.contains(this.options.activeClass)
if (!isActive) activeItem.classList.add(this.options.activeClass)
}
removeCurrentActive({ ignore }) {
const { hrefAttribute, menuActiveTarget, activeClass } = this.options
const items = `${menuActiveTarget}.${activeClass}:not([${hrefAttribute}="${ignore.getAttribute(hrefAttribute)}"])`
const menuItems = this.menuList.querySelectorAll(items)
menuItems.forEach((item) => item.classList.remove(this.options.activeClass))
}
}