Fix Nav-Bar when link to section of page (#486)
This commit is contained in:
parent
bc0b69d726
commit
d1bc8e2f4c
1 changed files with 34 additions and 28 deletions
|
@ -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);
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue