https://www.soloq-dev.com/assets/js/grayscale.js

1(function() {
2  "use strict"; // Start of use strict
3
4  var mainNav = document.querySelector('#mainNav');
5
6  if (mainNav) {
7
8    var navbarCollapse = mainNav.querySelector('.navbar-collapse');
9    
10    if (navbarCollapse) {
11
12      var collapse = new bootstrap.Collapse(navbarCollapse, {
13        toggle: false
14      });
15      
16      var navbarItems = navbarCollapse.querySelectorAll('a');
17      
18      // Closes responsive menu when a scroll trigger link is clicked
19      for (var item of navbarItems) {
20        item.addEventListener('click', function (event) {
21          collapse.hide();
22        });
23      }
24    }
25
26    // Collapse Navbar
27    var collapseNavbar = function() {
28
29      var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
30
31      if (scrollTop > 100) {
32        mainNav.classList.add("navbar-shrink");
33      } else {
34        mainNav.classList.remove("navbar-shrink");
35      }
36    };
37    // Collapse now if page is not at top
38    collapseNavbar();
39    // Collapse the navbar when page is scrolled
40    document.addEventListener("scroll", collapseNavbar);
41  }
42
43})(); // End of use strict