导航栏不透明度/滚动更改

Question

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 800px and I want my nav to lose 100% of transparency after those 800px . 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>
       </ul>
   </nav>

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 ( ul and li ) 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

Answer 1

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.

Answer 2

The issue in your code is that you're providing navOpacity as a string to css() , instead of the variable itself. Try this:

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

Also note that your current logic is backwards to what you describe as your goal (the header starts transparent and becomes opaque at 800px) and the logic can also be simplified a lot. Try this:

$(window).scroll(function() {
    var pc = $(this).scrollTop() / 800;
    $('.navbar').css('opacity', 1 - pc);
});

Working example

Answer 3

Alternatively you could use jquery method .fadeTo() instead of css('opacity') . This method animates the opacity of the elements smoothly. It is easier to use and the animation is pretty good looking compared to instant opacity change.

jQuery('.navbar').fadeTo( "slow" , navOpacity);

if (jQuery('nav').css('opacity') < 1) {
  jQuery('.navigation').fadeTo( "slow" , 1);
};