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

，可以通过以下步骤实现：

首先，需要监听页面滚动事件。可以使用JavaScript的scroll事件来实现，当页面滚动时触发相应的函数。
在滚动事件的处理函数中，可以通过获取当前滚动位置来确定当前所在的div。可以使用window.pageYOffset或document.documentElement.scrollTop获取当前滚动的垂直位置。
接下来，需要确定每个div的位置范围。可以通过获取每个div的高度和位置信息，然后计算出每个div的起始位置和结束位置。
根据当前滚动位置，判断当前所在的div。可以使用条件判断语句来判断当前滚动位置是否在某个div的范围内。
当确定当前所在的div后，可以更新导航栏按钮的活动状态。可以通过添加或移除CSS类来改变按钮的样式，或者通过修改按钮的属性来改变按钮的状态。

以下是一个示例代码：

// 监听页面滚动事件
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');
  });
}

在上述示例代码中，我们通过监听页面滚动事件来实时更新导航栏按钮的活动状态。根据当前滚动位置和每个div的位置范围，判断当前所在的div，并相应地更新导航栏按钮的样式。你可以根据实际情况修改代码中的div和按钮的ID，以及样式类名，来适应你的具体需求。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云内容分发网络（CDN）。腾讯云云服务器提供可扩展的计算能力，适用于各种应用场景；腾讯云内容分发网络可以加速内容传输，提高用户访问速度。你可以访问腾讯云官网了解更多关于腾讯云云服务器和内容分发网络的信息：腾讯云云服务器、腾讯云内容分发网络。