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

Question

我写了一些 jQuery 代码，可以根据我的网页所在的部分更改 nav/header 的颜色。它工作但不完美，有时它会在不应该的时候改变中间部分，或者在错误的部分改变错误的颜色。

这是我的 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))

您还可以做的一件事是从 document ready 更改为 window load。 window 加载函数将等待加载图像。

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

Using jQuery to change nav colour is causing mixed results

css

jquery

header

nav