Javascript 在特定滚动级别添加背景色？

我希望导航的背景在登录页上保持透明，但当用户滚动到页面的下一部分时，我希望导航的背景显示出来，然后在他们向上滚动时折叠，有点像这样（没有幻灯片效果）

您需要计算正在滚动的元素的滚动位置，并且需要计算要触发的元素在页面上的位置。这里有一个jquery的例子，但它也可以很容易地在vanilla js中完成

CSS

HTML

第0节
第一节
第二节
第三节
第四节
第五节
第六节
第7节

JS

var$window=$（window），$nav=$（'nav'），$sections=$（'section'））
$window.on（“滚动”，onScroll）；
函数onScroll（e）{
$sections.each（函数（）{
变量$section=$（本）；
如果（$section.offset（）.top-$window.scrollTop（）<0）{
$nav.css（'backgroundColor'，$section.data（'color'）；
}
})
}

Post you fiddle，

html,body {
    height: 100%;
    width: 100%;
    margin:0;
    padding:0;
}

section{
    height: 220px;
}

nav {
    position: fixed;
    top:0;
    left: 0;
    width: 100%;
    height: 20px;
    border: 1px solid #888;
}

<div id="main">
    <section data-color="transparent">Section 0</section>
    <section data-color="#f60000">Section 1</section>
    <section data-color="#00f600">Section 2</section>
    <section data-color="#0000f6">Section 3</section>
    <section data-color="#ff9966">Section 4</section>
    <section data-color="#66ff99">Section 5</section>
    <section data-color="#9966ff">Section 6</section>
    <section data-color="#6699ff">Section 7</section>
</div>
<nav></nav>

var $window = $(window), $nav = $('nav'), $sections = $('section')

$window.on("scroll", onScroll);

function onScroll(e){
    $sections.each(function(){
        var $section = $(this);
        if ($section.offset().top - $window.scrollTop() < 0){
            $nav.css('backgroundColor', $section.data('color'));
        }
    })
}