在从一个div滚动到下一个div时更改导航栏按钮的活动状态

// 监听页面滚动事件
window.addEventListener('scroll', function() {
  // 获取当前滚动位置
  var scrollPosition = window.pageYOffset || document.documentElement.scrollTop;

  // 获取每个div的位置范围
  var div1 = document.getElementById('div1');
  var div2 = document.getElementById('div2');
  var div1Start = div1.offsetTop;
  var div1End = div1Start + div1.offsetHeight;
  var div2Start = div2.offsetTop;
  var div2End = div2Start + div2.offsetHeight;

  // 判断当前所在的div
  if (scrollPosition >= div1Start && scrollPosition < div1End) {
    // 当前在div1中，更新导航栏按钮的活动状态
    setActiveButton('button1');
  } else if (scrollPosition >= div2Start && scrollPosition < div2End) {
    // 当前在div2中，更新导航栏按钮的活动状态
    setActiveButton('button2');
  } else {
    // 其他情况，清除所有按钮的活动状态
    clearActiveButtons();
  }
});

// 更新导航栏按钮的活动状态
function setActiveButton(buttonId) {
  // 清除所有按钮的活动状态
  clearActiveButtons();

  // 添加活动状态到指定按钮
  var button = document.getElementById(buttonId);
  button.classList.add('active');
}

// 清除所有按钮的活动状态
function clearActiveButtons() {
  var buttons = document.querySelectorAll('.nav-button');
  buttons.forEach(function(button) {
    button.classList.remove('active');
  });
}