在网站的不同部分进行标题/导航更改颜色

Question

我正在为我的个人投资组合网站重新设计网站。 我有一个很酷的功能，我的标题/导航栏会根据它所在网页的哪个部分改变颜色（网站只有一页）。

我能想到这样做的唯一方法是将onclick事件添加到转到页面不同部分的链接，但是当用户手动滚动到a时，这不允许我更改标题/导航栏的颜色。新的部分。

我想知道是否有人可以指出我正确的方向，因为我不知道从哪里开始。

如果人们想查看它，这是现在的网站：

www.kylebinger.com

这是关于标题的HTML标记

<header>
    <div class="container">
        <nav>
            <a href="#home">Welcome</a>
            <a href="#featuredWork">Work</a>
            <a href="#caseStudy">Case Study</a>
            <a href="#about">About</a>
            <a href="#contact">Contact</a>
        </nav>
    </div>
</header>

在此先感谢您的帮助。

Answer 1

JQuery的offset和scrollTop函数应该可以解决问题。 .offset（）获取元素的当前坐标，而.scrollTop（）将获取当前滚动条位置。 比较它们并在满足条件时更改CSS。 见例子：

 var top1 = $('#home').offset().top; var top2 = $('#featuredWork').offset().top; var top3 = $('#caseStudy').offset().top; $(document).scroll(function() { var scrollPos = $(document).scrollTop(); if (scrollPos >= top1 && scrollPos < top2) { $('#change').css('background-color', '#f00'); } else if (scrollPos >= top2 && scrollPos < top3) { $('#change').css('background-color', '#0f0'); } else if (scrollPos >= top3) { $('#change').css('background-color', '#00f'); } }); 

 body { margin: 0; padding-top: 30px } header { position: fixed; top: 0; width: 100%; height: 30px; background-color: #000; } section { height: 500px; background-color: #aaa; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <header id="change"> <div class="container"> <nav> <a href="#home">Welcome</a> <a href="#featuredWork">Work</a> <a href="#caseStudy">Case Study</a> </nav> </div> </header> <section id="home">Content</section> <section id="featuredWork">Content</section> <section id="caseStudy">Content</section>