https://www.scoutsongs.com/js/sticky.js

1const stickyRail = document.getElementById('RailSticky');
2const stickyAdCont = document.getElementById('StickSpiceContainer');
3const navHeight = 60;
4const bottomMargin = 20;
5const tabletWidth = 768;
6
7const handleSpicePositioning = () => {
8    // Get bounding client stickyRailRect
9    const stickyRailRect = stickyRail.getBoundingClientRect();
10    const stickyAdRect = stickyAdCont.getBoundingClientRect();
11    const adHeight = stickyAdCont.offsetHeight;
12    const viewportWidth = window.innerWidth;
13
14    if (viewportWidth < tabletWidth) {
15        stickyAdCont.classList.remove('stickyAd');
16        stickyAdCont.classList.remove('stickyBottom');
17        return;
18    }
19
20    const adPinnedRailBottom =
21        // Pinned Bottom: The add bottom would be lower than the rail bottom
22        (stickyAdRect.bottom > stickyRailRect.bottom) || (navHeight + adHeight > stickyRailRect.bottom - bottomMargin);
23    const adScrollsWithPage =
24        // Free Scroll: The rail top is still below the nav.
25        stickyRailRect.top > navHeight;
26    const adPinnedRailTop =
27        // Pinned Top: The rail top is abocve the nav and the ad bottom would be above the rail bottom
28        stickyRailRect.top <= navHeight;
29
30    // Check if top of stickyRail is less than 60px from top of viewport
31    if (adScrollsWithPage) {
32        //console.log('RAIL: Free Scrolling');
33        stickyAdCont.classList.remove('stickyAd');
34        stickyAdCont.classList.remove('stickyBottom');
35    }
36    else if (adPinnedRailBottom) {
37        //console.log('RAIL: Scroll ad pinned at bottom of rail');
38        stickyAdCont.classList.remove('stickyAd');
39        stickyAdCont.classList.add('stickyBottom');
40    }
41    else if (adPinnedRailTop) {
42        //console.log('RAIL: Pin the ad at top of viewport');
43        stickyAdCont.classList.add('stickyAd');
44        stickyAdCont.classList.remove('stickyBottom');
45    }
46};
47// Add event listener for scroll event
48window.addEventListener('scroll', function () {
49    handleSpicePositioning();
50});
51// Add event listener for scroll event
52window.addEventListener('resize', function () {
53    handleSpicePositioning();
54});