• Page 1 of 1
  • 1
Forum moderator: bigblog  
uCoz Community » For Webmasters » Custom Solutions » Fade on scrolling down
Fade on scrolling down
jackass
Posts: 294
Reputation: 10

Message # 1 | 8:03 PM
Hello!

I'm trying to do this on uCoz site, but without any success!
https://codepen.io/brightonmike/pen/xnuzg

Can you help my?
I want to fade my menu as it is fixed to the top!

Added (2018-01-24, 8:03 PM)
---------------------------------------------
Thanks for nothing!
I worked it out!

joexyz
JOE-vascript
Posts: 1770
Reputation: 78

Message # 2 | 9:38 PM
jackass, there are so many better ways to achieve this btw
hey i'm joe and i do not work for the company anymore, please contact other staff or tech support
icon by ch-chau

sometimes i lurk here
jackass
Posts: 294
Reputation: 10

Message # 3 | 8:15 AM
Doing this now!

HTML

Code
<html>

<head></head>
<body>
<div id="main-menu">
 MAIN MENU
</div>
</body>

</html>


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;
}


JS

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
uCoz Community » For Webmasters » Custom Solutions » Fade on scrolling down
  • Page 1 of 1
  • 1
Search: