Custom JavaScript before </body>
<script>
window.addEventListener("scroll", function () {
const stickyBlock = document.getElementById("stickyBlock");
if (window.scrollY > 100) {
stickyBlock.classList.add("show");
stickyBlock.classList.remove("hide");
} else {
stickyBlock.classList.add("hide");
setTimeout(() => {
if (stickyBlock.classList.contains("hide")) {
stickyBlock.classList.remove("show");
}
}, 300); // ждём анимацию перед скрытием
}
});
</script>
Стили
#stickyBlock {
position: fixed;
top: 50px;
left: 0;
width: 100%;
padding: 15px;
text-align: center;
font-weight: bold;
display: none!important; /* изначально невидим */
transition: opacity 0.3s ease;
z-index: 1000;
}
#stickyBlock.show {
display: block!important;
opacity: 1;
}
#stickyBlock.hide {
opacity: 0;
}