• Page 1 of 1
  • 1
Forum moderator: bigblog  
uCoz Community » For Webmasters » Custom Solutions » Fade on scrolling down
Fade on scrolling down
jackass
Posts: 287
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!

bigblog
*boops*
Posts: 1522
Reputation: 72

Message # 2 | 9:38 PM
jackass, there are so many better ways to achieve this btw
hey i'm joe, please don't call me on my real name because you're gonna misspell or mispronounce it and it drives me nuts

i do not work for the company anymore, sorry for the late replies
pfp by Natalie Butler
jackass
Posts: 287
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: