lucaspatenaude/ScoreSpot
1
0
Fork 0
Code Projects 1 Releases 1 Wiki Activity

Fix to make account pane scroll with navigation bar

Browse Source
This commit is contained in:
Lucas Patenaude
2024-04-24 23:59:58 -06:00
parent 2a6fe0b126
commit 58750d3386
1 changed files with 38 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
ProjectSourceCode/src/resources/js/navigation-bar/navigation-bar-follow.js
View File

@@ -2,36 +2,44 @@
// Function to add sticky behavior to the navbar // Function to add sticky behavior to the navbar
function makeNavbarSticky() { function makeNavbarSticky() {
// Get the navigation bar element // Get the navigation bar element
var navbar = document.getElementById("navigation-bar-container"); var navbar = document.getElementById("navigation-bar-container");
var accountPane = document.querySelector(".account-portal-container"); // Use querySelector instead of getElementByClassName
// Get the initial offset of the navbar from the top of the page
var navbarOffset = navbar.offsetTop; // Get the initial offset of the navbar from the top of the page
var navbarOffset = navbar.offsetTop;
// Function to add sticky behavior when scrolling
function stickyNavbar() { // Function to add sticky behavior when scrolling
// Check if the current scroll position is greater than or equal to the initial offset of the navbar function stickyNavbar() {
if (window.pageYOffset >= navbarOffset) { // Check if the current scroll position is greater than or equal to the initial offset of the navbar
// Add the 'fixed-top' class to make the navbar sticky if (window.pageYOffset >= navbarOffset) {
navbar.classList.add("fixed-top"); // Add the 'fixed-top' class to make the navbar sticky
// Add padding to the body to prevent content from jumping when the navbar becomes sticky navbar.classList.add("fixed-top");
document.body.style.paddingTop = navbar.offsetHeight + "px"; // Add padding to the body to prevent content from jumping when the navbar becomes sticky
} else { document.body.style.paddingTop = navbar.offsetHeight + "px";
// Remove the 'fixed-top' class to make the navbar non-sticky
navbar.classList.remove("fixed-top"); // Adjust the position of the account pane
// Reset the padding of the body accountPane.style.position = "fixed"; // Make the account pane fixed
document.body.style.paddingTop = 0; accountPane.style.top = navbar.offsetHeight + 20 + 'px'; // Move the account pane below the navbar
} } else {
// Remove the 'fixed-top' class to make the navbar non-sticky
navbar.classList.remove("fixed-top");
// Reset the padding of the body
document.body.style.paddingTop = 0;
accountPane.style.position = "absolute"; // Make the account pane fixed
// Set the top position of the account pane to be 150px off the top
accountPane.style.top = "160px";
} }
// Call the stickyNavbar function when the page is scrolled
window.onscroll = function() {
stickyNavbar();
};
} }
// Call the makeNavbarSticky function when the page loads // Call the stickyNavbar function when the page is scrolled
window.onload = function() { window.onscroll = function() {
makeNavbarSticky(); stickyNavbar();
}; };
}
// Call the makeNavbarSticky function when the page loads
window.onload = function() {
makeNavbarSticky();
};