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

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

1 个答案: