使用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

我有n o为你测试这种方式，但我的怀疑是，这与保存偏移量的变量有关。 通过这样做：

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。窗口加载功能将等待图像加载。