Wallpaper style banner sticky functionality. Respects header/footer margins.

wallpaper-sticky-banner.js

/**
 * Wallpaper style banner sticky functionality
 * Respects header/footer margins
 *
 * [wallpaperStickyBanner banner element handle]
 */

 var elementSelector = '#wallpaperStickyBanner'
 var headerHeight = 140
 var footerHeight = 315

 function handleWallpaperScroll() {
     if (!window.wallpaperStickyBanner) {
         var wallpaperStickyBanner = document.querySelector(elementSelector)

         if (!wallpaperStickyBanner) {
             return
         }

         window.wallpaperStickyBanner = wallpaperStickyBanner
     }

     var iframeWindowDiff = window.innerHeight - window.wallpaperStickyBanner.height
     var distanceFromFooter = document.documentElement.scrollHeight - window.innerHeight - window.pageYOffset
     if (window.pageYOffset >= headerHeight && distanceFromFooter + (iframeWindowDiff > 0 ? iframeWindowDiff : 0) > footerHeight) {
         window.wallpaperStickyBanner.style.position = 'fixed'
         window.wallpaperStickyBanner.style.top = '0px'
     } else {
         if (distanceFromFooter + (iframeWindowDiff > 0 ? iframeWindowDiff : 0) <= footerHeight) {
             window.wallpaperStickyBanner.style.position = 'absolute'
             window.wallpaperStickyBanner.style.bottom = '450px'
             window.wallpaperStickyBanner.style.top = 'auto'
         } else {
             window.wallpaperStickyBanner.style.top = '0px'
             window.wallpaperStickyBanner.style.position = 'absolute'
         }
     }
 }

 handleWallpaperScroll()
 window.addEventListener('scroll', handleWallpaperScroll)