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>

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

1 个答案: