页面不同扇区的不同导航栏文本颜色

.section1 {
  color: red;
}

.section2 {
  color: blue;
}

.section3 {
  color: green;
}

window.addEventListener('scroll', function() {
  var section1 = document.getElementById('section1');
  var section2 = document.getElementById('section2');
  var section3 = document.getElementById('section3');
  var navbar = document.getElementById('navbar');

  var currentSection = null;

  // 判断当前所在的扇区
  if (isElementInViewport(section1)) {
    currentSection = section1;
  } else if (isElementInViewport(section2)) {
    currentSection = section2;
  } else if (isElementInViewport(section3)) {
    currentSection = section3;
  }

  // 根据当前扇区设置导航栏文本颜色
  if (currentSection === section1) {
    navbar.style.color = 'red';
  } else if (currentSection === section2) {
    navbar.style.color = 'blue';
  } else if (currentSection === section3) {
    navbar.style.color = 'green';
  }
});

// 判断元素是否在视口内
function isElementInViewport(element) {
  var rect = element.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}