document.addEventListener('DOMContentLoaded', function() {
// Wait a bit for everything to load
setTimeout(function() {
initStickyGallery();
}, 100);
});
function initStickyGallery() {
const gallery = document.querySelector('.product-gallery');
const productMain = document.querySelector('.product-main');
// If elements don't exist, exit
if (!gallery || !productMain) return;
// Track if sticky is active
let isStickyActive = true;
function checkSticky() {
// Only run on desktop
if (window.innerWidth < 1024) {
if (isStickyActive) {
gallery.style.position = '';
gallery.classList.remove('sticky-ended');
isStickyActive = false;
}
return;
}
// Get positions
const galleryRect = gallery.getBoundingClientRect();
const productMainRect = productMain.getBoundingClientRect();
const footer = document.querySelector('footer') || document.querySelector('.site-footer');
const footerRect = footer ? footer.getBoundingClientRect() : null;
// Get the bottom of the right column content
const rightColumnBottom = productMainRect.bottom;
const viewportHeight = window.innerHeight;
// Also check if gallery would hit the footer
let galleryWouldHitFooter = false;
if (footerRect) {
const galleryBottomRelative = galleryRect.top + gallery.offsetHeight;
if (galleryBottomRelative >= footerRect.top - 50) {
galleryWouldHitFooter = true;
}
}
// Condition to end sticky:
// Either right column content is fully scrolled past viewport
// OR gallery would overlap with footer
if (rightColumnBottom <= viewportHeight + 100 || galleryWouldHitFooter) {
if (isStickyActive) {
gallery.style.position = 'relative';
gallery.classList.add('sticky-ended');
isStickyActive = false;
}
} else {
if (!isStickyActive) {
gallery.style.position = 'sticky';
gallery.style.top = '30px';
gallery.classList.remove('sticky-ended');
isStickyActive = true;
}
}
}
// Run on scroll and resize
window.addEventListener('scroll', checkSticky);
window.addEventListener('resize', checkSticky);
// Initial check
checkSticky();
}
