123 lines
4.0 KiB
JavaScript
123 lines
4.0 KiB
JavaScript
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
// Get references to the DOM elements
|
|
const header = document.getElementById('lcp-header-container');
|
|
const sideContent = document.getElementById('lcp-sidecontent');
|
|
|
|
// Ensure elements exist before proceeding
|
|
if (!header || !sideContent) return;
|
|
|
|
// Check if the header has the 'lcp-sticky' and 'lcp-sticky-on-scroll' class
|
|
const headerIsSticky = header.classList.contains('lcp-sticky');
|
|
const headerIsStickyOnScroll = header.classList.contains('lcp-sticky-on-scroll');
|
|
|
|
// Measure the height of the header once the DOM is loaded
|
|
const headerHeight = header.offsetHeight;
|
|
let fullHeaderHeight;
|
|
|
|
// If the admin-bar is present, the fullHeaderHeight is the headerHeight + 32px
|
|
if (document.body.classList.contains('admin-bar')) {
|
|
const adminBarHeight = document.getElementById('wpadminbar').offsetHeight;
|
|
fullHeaderHeight = headerHeight + adminBarHeight;
|
|
} else {
|
|
fullHeaderHeight = headerHeight;
|
|
}
|
|
|
|
|
|
|
|
// Function to handle the scroll event
|
|
function handleScroll() {
|
|
document.documentElement.style.setProperty('--lcp--full-header--height', fullHeaderHeight + "px");
|
|
if (!headerIsSticky){
|
|
const scrolled = window.scrollY || document.documentElement.scrollTop;
|
|
|
|
// Check if the page has scrolled past the height of the header
|
|
if (scrolled >= headerHeight) {
|
|
// Add the 'lcp-fixed' class and set 'top' to 0 for side content
|
|
sideContent.classList.add('lcp-fixed');
|
|
// sideContent.style.top = fullHeaderHeight + 'px';
|
|
|
|
// If the header has 'lcp-sticky-on-scroll', adjust height of side content to be 100vh - fullHeaderHeight
|
|
if (headerIsStickyOnScroll) {
|
|
sideContent.style.height = `calc(100vh - ${fullHeaderHeight}px)`;
|
|
// Add 'lcp-fixed' to the header
|
|
header.classList.add('lcp-fixed');
|
|
// Set the 'top' of the sideContent to the height of the header
|
|
// sideContent.style.top = `${fullHeaderHeight}px`;
|
|
} else if (headerIsSticky) {
|
|
// If the header is sticky but not 'sticky-on-scroll', keep the side content height adjusted
|
|
// sideContent.style.height = `calc(100vh - ${fullHeaderHeight}px)`;
|
|
} else {
|
|
// Set side content height to 100vh when not sticky
|
|
|
|
// sideContent.style.height = 'calc(100vh - 32px)';
|
|
// sideContent.style.top = '32px';
|
|
|
|
}
|
|
} else {
|
|
// Remove the 'lcp-fixed' class from side content and header if scrolled back above the header
|
|
sideContent.classList.remove('lcp-fixed');
|
|
// sideContent.style.top = ''; // Reset the 'top' style
|
|
|
|
// Reset height to 100vh when not fixed
|
|
// sideContent.style.height = `calc(100vh - ${fullHeaderHeight}px)` ;
|
|
|
|
// If header has the 'lcp-sticky-on-scroll' class, remove 'lcp-fixed' from the header
|
|
if (headerIsStickyOnScroll) {
|
|
header.classList.remove('lcp-fixed');
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Also trigger the scroll handler once on load in case the page is already scrolled
|
|
handleScroll();
|
|
|
|
function debounce(func, delay) {
|
|
let timeout;
|
|
return function() {
|
|
const context = this;
|
|
const args = arguments;
|
|
clearTimeout(timeout);
|
|
timeout = setTimeout(function() {
|
|
func.apply(context, args);
|
|
}, delay);
|
|
};
|
|
}
|
|
|
|
// Add debounced scroll event listener
|
|
window.addEventListener('scroll', debounce(handleScroll, 0)); // 200ms debounce
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const sidecontent = document.getElementById("lcp-sidecontent");
|
|
const innerContent = document.getElementById("lcp-sidecontent-inner");
|
|
const scrollTrack = document.getElementById("lcp-scroll-track");
|
|
const scrollBar = document.getElementById("lcp-scroll-bar");
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|