Q:

How to make smooth change of css property while scrolling?

I have a task - my navigation block has background property background: rgba(0,0,0, 0);
I need to smooth change its opacity from 0 to 1 while scrolling, its no problem, but the end of animation (i mean the moment when opacity of background will reach 1) is bottom border of some block
so this is my HTML code
<header>
    <nav>...</nav>
</header>

header has a flexible height. nav has a height of 100px. So i need my nav`s background opacity to reach 1 when scrollTop value will be:
$('header').height() - $(nav).height();

https://jsfiddle.net/zzvns9hy/7/

A:

You can do something like
HTML
<header>
    <nav></nav>
</header>

CSS
nav {
    width:100px;
    height:100px;
}

SCRIPT
$(window).scroll(function() {
    // what is the position of nav from the top of the document
    var NavTop = Math.floor( $(document).scrollTop() - $('nav').offset().top );
    // From 0 to 1, how much is nav scrolled
    var NavScroll = NavTop / $('nav').height(); 

    $('nav').css('background-color','rgba(255,0,0,'+NavScroll+')');
});

http://jsfiddle.net/an50e93p/

