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

This commit is contained in:
Tobias Mühlberger 2022-01-04 05:43:27 +01:00 committed by GitHub
parent bc0b69d726
commit d1bc8e2f4c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -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);