javascript - 在网站的不同部分使标题/导航改变颜色

Question

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

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

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

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

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>