You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
26 lines
1.4 KiB
JavaScript
26 lines
1.4 KiB
JavaScript
document.addEventListener("DOMContentLoaded", function() {
|
|
const ticketHeader = document.getElementById("ticketHeader");
|
|
const fixedTicketHeader = document.getElementById("fixedTicketHeader");
|
|
|
|
function checkScroll() {
|
|
const ticketHeaderRect = ticketHeader.getBoundingClientRect();
|
|
const parentWidth = ticketHeader.parentElement.offsetWidth;
|
|
|
|
if (ticketHeaderRect.bottom <= 0) {
|
|
fixedTicketHeader.style.width = `${parentWidth}px`; // Set the width of the fixed header to match the parent container
|
|
fixedTicketHeader.style.left = `${ticketHeader.parentElement.getBoundingClientRect().left}px`; // Align to the left edge of the parent
|
|
fixedTicketHeader.style.position = 'fixed'; // Make it fixed at the top
|
|
fixedTicketHeader.classList.remove("hidden");
|
|
fixedTicketHeader.classList.add("top-0", "z-10");
|
|
} else {
|
|
fixedTicketHeader.style.width = ''; // Reset the width to default
|
|
fixedTicketHeader.style.left = ''; // Reset the left position
|
|
fixedTicketHeader.style.position = ''; // Reset the position to default
|
|
fixedTicketHeader.classList.remove("top-0", "z-10");
|
|
fixedTicketHeader.classList.add("hidden");
|
|
}
|
|
}
|
|
|
|
window.addEventListener("scroll", checkScroll);
|
|
window.addEventListener("resize", checkScroll); // Re-check on resize as well
|
|
}); |