jquery - 使用 jQuery 更改导航颜色会导致混合结果

Question

我写了一些 jQuery 代码，可以根据网页的哪个部分更改导航/标题的颜色。它可以工作但并不完美，有时它会在不应该的情况下更改中间部分，或者在错误的部分更改为错误的颜色。

这是我的 jQuery 代码:

$( document ).ready(function() {


var top1 = $('#home').offset().top;
var top2 = $('#featuredWork').offset().top - headerHeight;
var top3 = $('#caseStudy').offset().top - headerHeight;
var top4 = $('#about').offset().top - headerHeight;
var top5 = $('#contact').offset().top - headerHeight;

//Change colour of header bar and elements based on which section the user is on
$(document).scroll(function() {
  if ($(document).scrollTop() >= top1 && $(document).scrollTop() < top2) {
    $('#header').css('background-color', '#dadfe0');
    $('.nav').css('color', '#21303f');
  } else if ($(document).scrollTop() >= top2 && $(document).scrollTop() < top3) {
    $('#header').css('background-color', '#21303f');
    $('.nav').css('color', '#dadfe0');
  } else if ($(document).scrollTop() >= top3 && $(document).scrollTop() < top4) {
    $('#header').css('background-color', '#dadfe0');
    $('.nav').css('color', '#21303f');
  } else if ($(document).scrollTop() >= top4 && $(document).scrollTop() < top5) {
    $('#header').css('background-color', '#21303f');
    $('.nav').css('color', '#dadfe0');
  } else if ($(document).scrollTop() >= top5) {
    $('#header').css('background-color', '#dadfe0');
    $('.nav').css('color', '#21303f');
  }  
});

});

这是我未完成的投资组合网站，出现此错误，有时在页面加载时有效，有时则不然

enter link description here

如果有人能告诉我为什么这不是每次都完美地工作，那就太好了

Answer 1

我无法为您测试这一点，但我怀疑这与在变量中保存偏移量有关。 通过这样做:

var top1 = $('#home').offset().top;

该值存储在 top1 中，但这并没有设置引用，因此只要偏移量发生变化，该变量就不会更新。

当前您正在使用 $(document).ready(function() { }); 但这仅意味着在加载 DOM(您的 HTML)之前不会执行其中的代码.它不会等待加载图像。可以想象，加载图像时偏移量会发生变化，从而使 top1 中的值无效。我怀疑您得到的结果好坏参半，因为有时文档就绪恰好在图像加载后执行(并且它似乎正在工作)，有时它在图像加载之前执行(并且它似乎不工作)。

一种解决方案是直接在文档滚动函数中获取偏移量，而不是使用存储的变量。 (或者您可以将变量保存在文档滚动功能中)例如这个

if ($(document).scrollTop() >= top1 && $(document).scrollTop() < top2)

会变成这样

if ($(document).scrollTop() >= $('#home').offset().top && $(document).scrollTop() < ($('#featuredWork').offset().top - headerHeight))

您还可以做的一件事是从文档就绪 更改为窗口加载。窗口加载函数将等待加载图像。