How to make transparent navbar when scroll to top of document

Question

I try to use my code for make transparent navbar(opacity = 0) when scroll to top document and set to opacity = 1 when scroll passing the object. But it's seem the code not working for me. Can someone look my code from jsFiddle and solve this problem? Fiddle

$(document).on('scroll', function (e) {
    var o = $(document).scrollTop() / 500;
    if (o > 1.000) { o = 1;}
    var e = $('nav');
    var currentColor = $('nav').css('background-color');
    var lastComma = currentColor.lastIndexOf(')');
    var newColor = currentColor.slice(0, lastComma - 1) + ", "+ o + ")";
    $('nav').css('background-color', newColor);
});

Answer 1

Three things:

• materialize.min.css applies the background-color with an !important flag with it. And since !important flag can override inline styles , you will need another !important flag to override that when applying inline styles. Messy I know but I cannot think of any other way.
• You are extracting rgb (without alpha) values from the element, but you want to apply rgba (with alpha) to it. Your resulting newColor variable will need to accommodate that.
• Finally, applying through .css() wouldn't help here. We will need to use .attr() to apply directly to the style attribute and concatenate all together in a string format.

Here is what you can do I think:

$(document).on('scroll', function (e) { updateColor(); });

function updateColor() {
  var o = $(document).scrollTop() / 500;
    if (o > 1.000) { o = 1; }
    var e = $('nav');
    var currentColor = e.css('background-color');
    var rgb = currentColor.replace(/^(rgb|rgba)\(/, '').replace(/\)$/, '').replace(/\s/g, '').split(',');
    var newColor = 'rgba(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ',' + o + ')';
    e.attr('style', 'background-color: ' + newColor + ' !important');
}

updateColor();

Snippet:

 $(document).on('scroll', function (e) { updateColor(); }); function updateColor() { var o = $(document).scrollTop() / 500; if (o > 1.000) { o = 1; } var e = $('nav'); var currentColor = e.css('background-color'); var rgb = currentColor.replace(/^(rgb|rgba)\\(/, '').replace(/\\)$/, '').replace(/\\s/g, '').split(','); var newColor = 'rgba(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ',' + o + ')'; e.attr('style', 'background-color: ' + newColor + ' !important'); } updateColor(); 

 header, main, footer { padding-left: 0px; } a.button-collapse { padding-left: 15px; } a.brand-logo.left-align.hide-on-med-and-down { padding-left: 20px; } a.brand-logo.left-align.hide-on-small-only.hide-on-large-only { font-size: 1.675rem; } a.brand-logo.left-align.hide-on-small-only.hide-on-large-only span { font-size: 1.12rem; } @media only screen and (max-width: 320px) { a.brand-logo.left-align.hide-on-med-and-up { font-size: 1.15rem; } } @media only screen and (min-width: 321px) { a.brand-logo.left-align.hide-on-med-and-up { font-size: 1.25rem; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script> <script src="http://materializecss.com/js/init.js"></script> <header> <div class="navbar-fixed" id="top"> <nav class="orange"> <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="mdi-navigation-menu"></i></a> <a class="brand-logo left-align">Header</a> <ul class="right hide-on-med-and-down"> <li><a class="waves-effect waves-light" id="test">Item 1</a></li> <li><a class="waves-effect waves-light">Item 2</a></li> <li><a class="waves-effect waves-light">Item 3</a></li> <li><a class="waves-effect waves-light">Item 4</a></li> </ul> <ul class="side-nav left-align" id="mobile-demo"> <li class="waves-effect waves-red" style="width: 100%;"><a>Item 1</a></li> <li class="waves-effect waves-red" style="width: 100%;"><a>Item 2</a></li> <li class="waves-effect waves-red" style="width: 100%;"><a>Item 3</a></li> <li class="waves-effect waves-red" style="width: 100%;"><a>Item 4</a></li> </ul> </nav> </div> </header> <main style="margin-top: -64px;"> <div style="width: 100%; height: 100vh; min-height:480px; background-color: #ccc; font-size: 3rem; vertical-align: center;"> <div class="valign-wrapper center-align" style="margin-top: 65px;"> <div class="valign">Transparent Navbar Section</div> <div class="valign grey-text text-darken-" 2 style="">(Opacity = 0%)</div> </div> </div> <p class="navopc-endchange"><u>End Color Opacity Change!(Opacity = 100%)</u></p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> </main> 

Hope this helps.

Answer 2

$(document).on('scroll', function (e) {
    e.preventDefault();
    var o = $(document).scrollTop() / 500;
    if (o > 1.000) { o = 1;}
    var e = $('nav');
    $('nav').css('opacity', o);
});

You need to change the opacity attribute.

Answer 3

I updated your fiddle with some new code: First I completely replaced your jquery with a more simple function that I wrote for one of my websites:

//nav snap
$(window).scroll(function(scroll) {
    var navStart = $('.navopc-endchange').offset().top;
    var scroll = $(window).scrollTop();
    if (scroll > navStart) {
        $('nav').addClass('opaque');
    } else {
        $('nav').removeClass('opaque');  
    }
});

It adds a class opaque to your navigation when you scroll past the top of the section beneath your top section (scrolling from the area where you want a transparent nav to where you want an opaque nav), and removes that class if you scroll back up.

I also added some new CSS:

nav {opacity:0;transition:opacity 0.3s;}
nav.opaque {opacity:1;}

This CSS just adds the properties for opacity:0 & opacity:1 for nav and nav.opaque and then I created a transition to make it fade nicely over 0.3 seconds.

http://jsfiddle.net/66xjehgt/5/