https://www.safety-support-car.go.jp/common/js/fixed-responsive-nav.js

1/* =============================================
2 *
3 *   FIXED RESPONSIVE NAV
4 *
5 *   (c) 2014 @adtileHQ
6 *   http://www.adtile.me
7 *   http://twitter.com/adtilehq
8 *
9 *   Free to use under the MIT License.
10 *
11 * ============================================= */
12
13(function () {
14
15  "use strict";
16
17  // Feature test to rule out some older browsers
18  if ("querySelector" in document && "addEventListener" in window) {
19
20    // forEach method, that passes back the stuff we need
21    var forEach = function (array, callback, scope) {
22      for (var i = 0; i < array.length; i++) {
23        callback.call(scope, i, array[i]);
24      }
25    };
26
27    // Attach FastClick to remove the 300ms tap delay
28    FastClick.attach(document.body);
29
30    // Init smooth scrolling
31    smoothScroll.init();
32
33    // Init Responsive Nav
34    var navigation = responsiveNav(".nav-collapse", {
35
36      // Close the navigation when it's tapped
37      closeOnNavClick: true
38    });
39
40    // Create a Mask
41    var mask = document.createElement("div");
42    mask.className = "mask";
43
44    // Append the mask inside <body>
45    document.body.appendChild(mask);
46
47    // Disable mask transitions on Android to boost performance
48    if (navigator.userAgent.match(/Android/i) !== null) {
49      document.documentElement.className += " android";
50    }
51
52    // Find navigation links and save a reference to them
53    var nav = document.querySelector(".nav-collapse ul"),
54      links = nav.querySelectorAll("[data-scroll]");
55
56    // "content" will store all the location cordinates
57    var content;
58
59    // Set up an array of locations which we store in "content"
60    var setupLocations = function () {
61      content = [];
62      forEach(links, function (i, el) {
63        var href = links[i].getAttribute("href").replace("#", "");
64        content.push(document.getElementById(href).offsetTop + 200);
65      });
66    };
67
68    // call locations set up once
69    setupLocations();
70
71    // Re-calculate locations on window resize and orientation change
72    window.addEventListener("resize", function () {
73      setupLocations();
74    }, false);
75
76    // Highlight active link on the navigation
77    var selectActiveMenuItem = function (i) {
78      forEach(links, function (i, el) {
79        links[i].parentNode.className = links[i].parentNode.className.replace(/[\s]{0,}active/, "");
80      });
81      links[i].parentNode.className += links[i].parentNode.className ? " active" : "active";
82    };
83
84    // Highlight active link when scrolling
85    var wasNavigationTapped = false;
86    window.addEventListener("scroll", function () {
87
88      // Determine viewport and body size
89      var top = window.pageYOffset,
90        body = document.body,
91        html = document.documentElement,
92        viewport = window.innerHeight,
93        bodyheight = Math.max(
94          body.scrollHeight,
95          body.offsetHeight,
96          html.clientHeight,
97          html.scrollHeight,
98          html.offsetHeight
99        );
100
101      // For each content link, when it's in viewport, highlight it
102      if (!wasNavigationTapped) {
103        forEach(content, function (i, loc) {
104          if ((loc > top && (loc < top + 300 || (top + viewport) >= bodyheight))) {
105            selectActiveMenuItem(i);
106          }
107        });
108      }
109    }, false);
110
111    // Close navigation when tapping the mask under it
112    mask.addEventListener("click", function (e) {
113      e.preventDefault();
114      navigation.close();
115    }, false);
116
117    // Clear wasNavigationTapped check after scrolling
118    var clearTapCheck = function () {
119      setTimeout(function () {
120        wasNavigationTapped = false;
121      }, 500);
122    };
123
124    // Select the right navigation item when tapping the matsu
125    document.querySelector(".matsu").addEventListener("click", function (e) {
126      e.preventDefault();
127      wasNavigationTapped = true;
128
129      // Select first navigation item
130      selectActiveMenuItem(0);
131
132      // Close navigation
133      navigation.close();
134
135      // Remove hash from the URL if pushState is supported
136      if (history.pushState) {
137        history.pushState("", document.title, window.location.pathname);
138      }
139
140      // Clear wasNavigationTapped check
141      clearTapCheck();
142    }, false);
143
144    // When a navigation item is tapped, select it and begin scrolling

145    forEach(links, function (i, el) {
146      links[i].addEventListener("click", function (e) {
147        e.preventDefault();
148        wasNavigationTapped = true;
149
150        // Select right navigation item (we are passing which one to select "i")
151        selectActiveMenuItem(i);
152
153        // Show the URL of the section on the address bar
154        var thisID = this.getAttribute("href").replace("#", ""),
155          pane = document.getElementById(thisID);
156
157        // If the URL isn't "#home", change it
158        if (thisID !== "home") {
159          pane.removeAttribute("id");
160          location.hash = "#" + thisID;
161          pane.setAttribute("id", thisID);
162
163        // If the URL is "#home", remove hash from the URL
164        } else {
165          if (history.pushState) {
166            history.pushState("", document.title, window.location.pathname);
167          }
168        }
169
170        // Clear wasNavigationTapped check
171        clearTapCheck();
172      }, false);
173    });
174
175  }
176
177})();