Liondj Liondj - 4 months ago 34
Javascript Question

navbar opacity/rgba change on scroll

I've been trying to create a nav that would be transparent at the top and would gain white color as the user scrolls down the page. My header height is

and I want my nav to lose 100% of transparency after those
. Here`s my code:

<header id="header">
<nav class="navbar">
<ul class="navigation">
<li><a href="#header">Home</a></li>
<li><a href="">About us</a></li>
<li><a href="">Our qualities</a></li>
<li><a href="">Contact us</a></li>
<li><a href="">contact us</a></li>

nav {
width: 1600px;
position: fixed;
top: 0;

ul {
margin: 0 auto;

li {
display: inline-block;
padding: 5px 20px;

a {
font-family: $f1;
font-size: 16pt;
color: $c3;

First I tried with opacity, but it didn't work, and on top of that child elements (
) had opacity of 0 as well.
Here`s the JS for that:

jQuery(document).ready( function() {
var navOffset = jQuery("nav").offset().top;

jQuery(window).scroll(function() {
var scrollPos = jQuery(window).scrollTop();
var navOpacity = scrollPos /800;
jQuery('.navbar').css(opacity, 'navOpacity');

if (jQuery('nav').css('opacity') < 1) {
jQuery('.navigation').css('opacity', '1')

Then I tried to change RGBA value on scroll, that didn't work either
Instead of

jQuery('.navbar').css( opacity, 'navOpacity' );

I used

jQuery('.navbar').css(backgroundcolor, 'rgba (255, 255, 255, + "navOpacity")');

That failed as well, so, I have to ask you too help me


You have made opacity not a string, but the variable navOpacity has become a string. That was wrong. Everything else is working fine in general. :)

// change
$('.navbar').css(opacity, "navOpacity");

// to
$('.navbar').css("opacity", navOpacity);

Working example.