https://www.barcelona-tourist-guide.com/0-Scripts/rhs-scroll.js?version=5

1document.addEventListener('DOMContentLoaded', function() {
2    // Debug flag - Set to 'true' if we're currently testing the RHS unit. Set to 'false' in production.
3    const debug = false;
4
5    // Find the RHS element which we need to make fixed + Stop the script if such element is not present on the page
6    const targetElement = document.querySelector('.rhsFixed');
7    if (!targetElement) {
8        if (debug) console.log('RHS scroll script: Target element .rhsFixed not found.');
9        return;
10    }
11
12    // Get the footer section once, as it doesn't change
13    const footerSection = document.querySelector('.pageFooter');
14
15    // Get other variables
16    const scrollThreshold = 200; // The scroll position in pixels to trigger the style change
17    const activeClass = 'scroll'; // The class name to be added/removed
18
19    // --- Debounce function for the resize observer ---
20    // This ensures our logic only runs once the element has finished resizing.
21    function debounce(func, delay) {
22        let timeoutId;
23        return function() {
24            clearTimeout(timeoutId);
25            timeoutId = setTimeout(func, delay);
26        };
27    }
28
29    // --- A function to clean up event listeners and styles ---
30    function cleanup() {
31        window.removeEventListener('scroll', handleScroll);
32        targetElement.classList.remove('scroll');
33        targetElement.style.top = '';
34    }
35
36    // --- MODIFIED: A function to check all conditions and set up listeners ---
37    function checkConditionsAndInitialize() {
38        // Get the dimensions of the web browser at the time of check
39        const windowWidth = window.innerWidth;
40        const windowHeight = window.innerHeight;
41        const footerSectionHeight = footerSection ? footerSection.clientHeight : 0;
42
43        // Stop the script execution on small screens
44        if (windowWidth < 1024) {
45            if (debug) console.error('RHS scroll is disabled - Browser screen is too small');
46            cleanup();
47            return;
48        }
49
50        // Do not run this function if the RHS section is bigger than the screen
51        if (windowHeight < targetElement.offsetHeight) {
52            if (debug) console.error('RHS scroll is disabled - RHS unit is larger than the screen');
53            cleanup();
54            return;
55        }
56
57        // Check for oversized elements
58        const elemArray = document.querySelectorAll('.mainContent img, .mainContent table.tableNormal');
59        const pageWidth = document.querySelector('.containerOversized') ? 1024 : 552;
60        const oversizedElementFound = Array.from(elemArray).some(elem => elem.clientWidth > pageWidth);
61        if (oversizedElementFound) {
62            if (debug) console.error('RHS scroll is disabled - Oversized element found');
63            cleanup();
64            return;
65        }
66
67        // If all conditions are met, set the initial state and ensure the scroll listener is active
68        handleScroll(); // Set the initial state
69        window.addEventListener('scroll', handleScroll, { passive: true });
70    }
71
72    // Function to handle the scroll event
73    function handleScroll() {
74        // Get the dimensions of the web browser at the time of scroll
75        const windowHeight = window.innerHeight;
76        const footerSectionHeight = footerSection ? footerSection.clientHeight : 0;
77        const bottomThreshold = footerSectionHeight; // The distance from the bottom to start the push-up effect
78
79        // Get the current vertical scroll position
80        const currentScrollPosition = window.pageYOffset || document.documentElement.scrollTop;
81        // Get the total height of the entire document
82        const documentHeight = document.documentElement.scrollHeight;
83        // Calculate the position of the bottom of the viewport relative to the document
84        const scrollPositionFromBottom = documentHeight - (currentScrollPosition + windowHeight);
85
86        // Condition 1: Are we past the top threshold?
87        const isPastTopThreshold = currentScrollPosition > scrollThreshold;
88        // Condition 2: Are we too close to the bottom?
89        const isNearBottom = scrollPositionFromBottom < bottomThreshold;
90        // Condition 3: Is the element tall enough to overlap?
91        const isElementTallEnoughToOverlap = targetElement.offsetHeight > (windowHeight - footerSectionHeight);
92
93        if (isPastTopThreshold && isElementTallEnoughToOverlap && isNearBottom) {
94            // --- We are in the "push-up" zone near the footer ---
95            targetElement.classList.add(activeClass);
96            const overlap = bottomThreshold - scrollPositionFromBottom;
97            targetElement.style.top = `${-overlap}px`;
98        } else if (isPastTopThreshold) {
99            // --- We are in the normal "sticky" zone ---
100            targetElement.classList.add(activeClass);
101            targetElement.style.top = ''; // Reset to original value
102        } else {
103            // --- We are at the top of the page ---
104            targetElement.classList.remove(activeClass);
105            targetElement.style.top = ''; // Clear any inline styles
106        }
107    }
108
109    // --- Create a ResizeObserver to watch the target element ---
110    const debouncedCheck = debounce(checkConditionsAndInitialize, 150);
111    const resizeObserver = new ResizeObserver(debouncedCheck);
112
113    // Start observing the element. This will fire the callback when the element
114    // is rendered with its final styles, solving the height timing issue.
115    resizeObserver.observe(targetElement);
116
117    // Also, observe the window to catch changes that don't affect the target element directly,
118    // like the browser window being resized.
119    resizeObserver.observe(document.body);
120
121});