Jquery 如何在滚动时平滑更改css属性？

我有一个任务-我的导航块有背景属性

background:rgba（0,0,0）
我需要在滚动时将其不透明度从0平滑更改为1，这没有问题，但动画的结尾（我的意思是背景不透明度将达到1的时刻）是某个块的底部边界

这是我的
HTML
代码

<header>
    <nav>...</nav>
</header>

您可以执行以下操作

HTML

剧本

$(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+')');
});

您能在JSFIDLE中创建一个示例吗？我以为您的问题是关于JQuery的，JQuery没有包含在JSFIDLE中。请检查以下内容：
<header>
    <nav></nav>
</header>

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

$(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+')');
});