Fade on scrolling down - uCoz Community

Message # 3 | 8:15 AM 2018-01-27

Doing this now!

HTML

Code

CSS

Code

#main-menu {
    background: black;
    color: white;
    text-align: center;
    padding: 4px;
    position: fixed;
    left: 0; right: 0;
    top: 0;
}

.spacer {
    height: 22px;
}

body.scrolled #main-menu {
    opacity: 0.2;
    transition: opacity .2s;
}
body.scrolled #main-menu:hover {
  opacity: 1.0;
  transition: opacity .2s;
}

body
{
  height:5000px;
}

Code

window.addEventListener('scroll', function () {
  document.body.classList[
    window.scrollY > 20 ? 'add': 'remove'
  ]('scrolled');
});

Post edited by jackass - Saturday, 2018-01-27, 8:16 AM

Page 1 of 1 1
Forum moderator: bigblog