Fix Nav-Bar when link to section of page (#486)

static/js/navbar.js

@@ -1,5 +1,36 @@
 "use strict";
 
+const updateNavBar = () => {
+  if ($(document).scrollTop() > 40) {
+    $('#top-navbar').removeClass('initial-navbar');
+    $('#top-navbar').addClass('final-navbar shadow');
+
+    $('#navbar-toggler').removeClass('navbar-dark');
+    $('#navbar-toggler').addClass('navbar-light');
+
+    // get the main logo from hidden img tag
+    let mainLogo = document.getElementById("main-logo")
+    if (mainLogo !== null) {
+      let logoURL = mainLogo.getAttribute("src");
+      $('#logo').attr("src", logoURL);
+    }
+
+  } else {
+    $('#top-navbar').removeClass('final-navbar shadow');
+    $('#top-navbar').addClass('initial-navbar');
+
+    $('#navbar-toggler').removeClass('navbar-light');
+    $('#navbar-toggler').addClass('navbar-dark');
+
+    // get the inverted logo from hidden img tag
+    let invertedLogo = document.getElementById("inverted-logo")
+    if (invertedLogo !== null) {
+      let logoURL = invertedLogo.getAttribute("src");
+      $('#logo').attr("src", logoURL);
+    }
+  }
+};
+
 (function ($) {
   jQuery(document).ready(function () {
 
@@ -8,34 +39,7 @@
     // When the user scrolls down 80px from the top of the document, resize the navbar's padding and the logo's font size
     // $.onscroll = function() {scrollFunction()};
     $(document).scroll(function () {
-      if ($(document).scrollTop() > 40) {
-        $('#top-navbar').removeClass('initial-navbar');
-        $('#top-navbar').addClass('final-navbar shadow');
-
-        $('#navbar-toggler').removeClass('navbar-dark');
-        $('#navbar-toggler').addClass('navbar-light');
-
-        // get the main logo from hidden img tag
-        let mainLogo = document.getElementById("main-logo")
-        if (mainLogo !== null) {
-          let logoURL = mainLogo.getAttribute("src");
-          $('#logo').attr("src", logoURL);
-        }
-
-      } else {
-        $('#top-navbar').removeClass('final-navbar shadow');
-        $('#top-navbar').addClass('initial-navbar');
-
-        $('#navbar-toggler').removeClass('navbar-light');
-        $('#navbar-toggler').addClass('navbar-dark');
-
-        // get the inverted logo from hidden img tag
-        let invertedLogo = document.getElementById("inverted-logo")
-        if (invertedLogo !== null) {
-          let logoURL = invertedLogo.getAttribute("src");
-          $('#logo').attr("src", logoURL);
-        }
-      }
+      updateNavBar();
     });
 
     // Creates a click handler to collapse the navigation when
@@ -46,6 +50,8 @@
         $('.navbar-collapse').collapse('hide');
       });
     }
+
+    updateNavBar();
   });
 
 })(jQuery);