function changeStickyOpacity() { const sticky = document.querySelector('.sticky-bar'); const range = 200; window.addEventListener('scroll', function () { const scrollTop = window.pageYOffset; const height = sticky.offsetHeight; const offset = height / 2; let calc = 1 - (scrollTop - offset + range) / range; header.style.cssText = `will-change: opacity; opacity: ${calc};`; if (calc > '1') { sticky.style.opacity = 0; } else if ( calc < '0' ) { sticky.style.opacity = 1; } }); }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter