0

I am trying to change the opacity of my navigation bar from lower to higher on scroll. My code is working, only problem is that nav menu items lose their opacity also. I would like them and also the logo to keep the white color and opacity 1 all the time, just want to change the background opacity. Here is my code

HTML

<nav>
<div id='cssmenu'>
<div id="logo">
        <a href="#"><img src="images/logo.png" /></a>
</div>                           
<ul>   
<li><a href='#'>Home</a></li>
<li class='active'><a href='#'>Products</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
</nav>

CSS

#cssmenu {
font-family: Montserrat, sans-serif;
background-color: #09090c;
position: fixed;
width:100%; 
background-color:rgba(9, 9, 12, 1); 
}
#cssmenu > ul > li {
float: right;
}
#cssmenu img{
float:left;
margin-left:10px;
}

JS

$(document).on('scroll', function (e) {
$('nav').css('opacity', ($(document).scrollTop() / 200));
});
frontendgirl
  • 57
  • 1
  • 13
  • But.... what have **you** tried so far? Why not use the other source code you found online and change it to suit your needs? Swap the color change for opacity.... – NewToJS Feb 23 '16 at 10:10

2 Answers2

0

Use 

rgba(red, green, blue, alpha)

instead of 

opacity

The last digit means the opacity of the color, 1 is full color, 0.5 is 50 % opacity. The values are from 0 - 255.

In your example, it is 

rgba(9, 9, 12, 1)

for full color.

You can convert HEX (#ffffff) to rgb with this tool, for example: http://hex2rgba.devoth.com/

Klassik
  • 141
  • 11
  • So that would be `alpha` right... – NewToJS Feb 23 '16 at 10:12
  • Yes. You are totally right. – Klassik Feb 23 '16 at 10:12
  • *Suggestion:* Add to your description. RGBA / Red-Green-Blue-Alpha / rbga(red,green,blue,alpha). R/G/B have values from 0-255. You have to assume those reading your answer haven't used it before as this gives a better description and a better understanding. – NewToJS Feb 23 '16 at 10:15
  • Thanks for that, haven't thought about this. The average knowledge here seems high for me. – Klassik Feb 23 '16 at 12:43
0

in stead of opacity you can better use rgba.

So when you are scrolling let it go from background:rgba(255,255,255, 0) to background:rgba(255,255,255, 1);

NiZa
  • 3,806
  • 1
  • 21
  • 29