navbar opacity/rgba change on scroll

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

This is a duplicate question. Please check http://stackoverflow.com/questions/29646622/set-bootstrap-navbar-transparency-on-scroll — Madalina Taina, Aug 02 '16 at 07:16
It actually isn`t. http://stackoverflow.com/questions/29646622/set-bootstrap-navbar-transparency-on-scroll He asked about how to add or remove class scrolled, while im trying to edit navs opacity when scrolled, there is a difference — Liondj, Aug 02 '16 at 07:33

eisbehr · Accepted Answer · 2016-08-02T07:17:14.133

0

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.

edited Aug 02 '16 at 07:17

answered Aug 02 '16 at 07:10

eisbehr

12,243
7
38
63

Rory McCrossan · Answer 2 · 2016-08-02T07:16:25.153

0

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

edited Aug 02 '16 at 07:16

answered Aug 02 '16 at 07:15

Rory McCrossan

331,213
40
305
339

And `opacity`should be a string. – eisbehr Aug 02 '16 at 07:16
@RoryMcCrossan thanks for the advice but the error was, like you said, that I didn`t use opacity as a string and used my variable name as a stirng, and that went wrong, but after fixing that my code worked normally. – Liondj Aug 02 '16 at 07:24

score 0 · Answer 3 · answered Aug 02 '16 at 07:20

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

navbar opacity/rgba change on scroll

3 Answers3