滚动时导航的活动状态

在网站或应用程序中，通常会使用导航栏来帮助用户快速访问不同的页面或功能，而在导航栏中，活动状态的显示对于用户来说是非常重要的。

实现方式

常见的导航栏都包裹在一个固定位置的容器中，而对于活动状态的显示，我们可以通过对容器的样式进行调整来实现滚动时的变化。

一种经典的做法是使用 "滚动监听"，通过监听页面的滚动事件来确定当前视口内具体的位置，并根据这个位置来确定哪个菜单项应该被设为活动状态。

下面是一个简单的示例代码：

$(document).on('scroll', function() {
  var windowHeight = $(window).height(),
      scrollTop = $(window).scrollTop();

  $('.nav-item').each(function() {
    var $item = $(this),
        offsetTop = $item.offset().top,
        height = $item.outerHeight();

    if (scrollTop > offsetTop - (windowHeight / 2) && scrollTop < offsetTop + height - (windowHeight / 2)) {
      $item.addClass('active');
    } else {
      $item.removeClass('active');
    }
  });
});

上面的示例代码使用了 jQuery 库和相关的 API，通过计算对应元素的位置和高度来判断哪个菜单项应该被设为活动状态。

当然，对于不使用 jQuery 的情况，也可以使用类似的方式，只需使用原生的 DOM API 和相关计算即可。

样式设置

有了判定活动状态的逻辑之后，我们还需要设置相应的样式来进行可视化的呈现。

在默认情况下，在菜单项上添加一个 .active 的 class 并改变其背景色、文字颜色等元素即可。

下面是一份简单的示例 css 样式代码：

.nav-item.active {
  background-color: #333;
  color: #fff;
}

这样，当菜单项被设为活动状态时，其样式就会变为设定好的颜色和样式，方便用户识别当前所在位置。

总结

综上所述，实现导航栏中滚动时的活动状态需要使用 "滚动监听" 的方式，监听滚动事件，计算菜单项的位置和高度，并通过代码来动态修改相应菜单项的 class 和样式。

这样的设计可以方便用户的使用和理解，提升产品的交互体验和友好性。