一、效果介绍

在搭建企业官网时，企业发展历程通常是比较关键的板块，它展示了企业从无到有，再到发展壮大的各个阶段，是企业成长节奏的缩影。

在与客户确认需求时，她们有时也会对这个板块提出一些要求，添加一些效果比如滚动浏览切换等等。于是长沙网站建设想出这样一种效果：

左侧是详细的年份内容，可以上下滚动浏览。右侧是一个缩略导航，只显示年份数字，它会根据顶部展示的内容高亮显示对应的年份。并且也能通过点击，将左侧展示的内容切换到对应的年份。

效果展示如下图：

二、效果实现

板块主要分为两部分：左侧的内容区域，长沙网站开发为它设置固定高度并添加 overflow-y: scroll;样式，使其变成可滚动区域，右侧则直接放年份导航。

效果核心代码：

function setActive(idx) {
  items[cur].classList.remove('hovs');
  navs[cur].classList.remove('hov');
  items[idx].classList.add('hovs');
  navs[idx].classList.add('hov');
  cur = idx;
}
for (var i = items.length - 1; i >= 0; i--) {
  if (items[i].offsetTop <= cont.scrollTop + 50) {
    if (cur != i) setActive(i);
    break;
  }
}

接下来是JavaScript的控制部分，长沙网站设计首先把两侧的条目按顺序存入数组，使用索引将它们对应起来。通过监听事件，在监听到左侧内容进行了滚动时，会计算出scrollTop的值，通过这个值找到目前滚动到顶部的内容是哪部分内容。最后将它的索引提取出来，同时将左右两侧对应的条目添加上新类名，使其高亮显示。

在点击右侧导航时，直接获取出点击项的索引并进行同步，条目类名进行切换，并通过scrollTo让左侧内容平滑滚动到对应的位置，这样整个效果就已经实现了。

完整代码如下：

三、效果演示视频：

在视频中可以非常直观的看到整个效果的完整运行流程。

四、效果扩展

最后在扩展方面，本次展示的效果也有非常多的地方可以进行扩展。比如更改布局，由上下展示切换成左右展示；或者在左侧内容较多时，将直接显示改为点击按钮，展开详情等等。

也可以增加小部件、调整背景样式，让整个效果看起来功能性更强，更加美观，给用户带来更好的体验。

以上就是长沙网站制作整理出的发展历程左右联动效果,希望对您有所帮助!

长沙蒲公英网络专业提供高效且优质的网站优化服务,为您的企业的发展保驾护航! 欢迎来电咨询:0731-84069615.