Discover top-quality skincare solutions tailored to your specific concerns at Dr. Odin. From acne to aging, our curated selection of skincare products addresses every need. Browse our extensive range for radiant, healthy skin. Elevate your skincare routine with trusted formulas designed for optimal results. Your journey to flawless skin starts here.
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();
}
