change opacity when scrolling the page
Mon Nov 01 2021 11:31:48 GMT+0000 (Coordinated Universal Time)
Saved by
@camtonguyen
#javascript
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;
}
});
}
content_copyCOPY
Comments