https://youngjae-min.github.io/js/navscroll.js

1function selectElementByClass(className) {
2  return document.querySelector(`.${className}`);
3}
4
5//const all_entries = document.querySelectorAll('section');
6const short_entries = [
7  selectElementByClass('home'),
8  selectElementByClass('honor'),
9];
10const long_entries = [
11  selectElementByClass('research'),
12];
13
14const navItems = {
15  home: selectElementByClass('home_nav'),
16  research: selectElementByClass('research_nav'),
17  honor: selectElementByClass('honor_nav'),
18};
19
20function make_active(id) {
21  const navItem = navItems[id];
22  navItem.classList.add('active');
23  Object.values(navItems).forEach((item) => {
24    if (item != navItem) {
25      item.classList.remove('active');
26    }
27  });
28}
29
30function long_callback(entries, observer) {
31  entries.forEach((entry) => {
32    if (entry.isIntersecting) {
33      var no_short = true;
34      short_entries.forEach((item) => {
35        if (item._intersectionRatio > 0.5) { no_short = false;}
36      });
37      if (no_short || entry.intersectionRect.height > 0.9 * document.documentElement.clientHeight) {
38	make_active(entry.target.id);
39      }
40    }
41  });  
42}
43
44function short_callback(entries, observer) {
45  entries.forEach((entry) => {
46    entry.target._intersectionRatio = entry.intersectionRatio;
47    if (entry.intersectionRatio > 0.7) {
48      make_active(entry.target.id);
49    }
50  });
51}
52
53// intersection observer setup
54const observerOptions_short = {
55  root: null,
56  rootMargin: '0px',
57  threshold: [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8],
58};
59const observerOptions_long = {
60  root: null,
61  rootMargin: '0px',
62  threshold: [0.05, 0.1, 0.15, 0.2, 0.25, 0.3, 0.35, 0.4, 0.45,  0.5, 0.55, 0.6, 0.65, 0.7, 0.75, 0.8, 0.85, 0.9, 0.95, 1],
63};
64
65const observer_s = new IntersectionObserver(short_callback, observerOptions_short);
66const observer_l = new IntersectionObserver(long_callback, observerOptions_long);
67
68short_entries.forEach((ent) => observer_s.observe(ent));
69long_entries.forEach((ent) => observer_l.observe(ent));
70
71// to the top on refresh
72window.onbeforeunload = function () {
73  window.scrollTo(0, 0);
74}