如何使用滚动条增加div高度？

Question

我正在尝试设计this时间轴。我已经设计了这个，但是问题是我无法像滚动一样增加div的高度。我只需要在滚动每个像素时增加.cm-timeline__path--active div高度即可。我真的很困惑如何实现这一目标。

我正在使用可见的jQuery检查父div是否在视口中。

! function(t) {
  var i = t(window);
  t.fn.visible = function(t, e, o) {
    if (!(this.length < 1)) {
      var r = this.length > 1 ? this.eq(0) : this,
        n = r.get(0),
        f = i.width(),
        h = i.height(),
        o = o ? o : "both",
        l = e === !0 ? n.offsetWidth * n.offsetHeight : !0;
      if ("function" == typeof n.getBoundingClientRect) {
        var g = n.getBoundingClientRect(),
          u = g.top >= 0 && g.top < h,
          s = g.bottom > 0 && g.bottom <= h,
          c = g.left >= 0 && g.left < f,
          a = g.right > 0 && g.right <= f,
          v = t ? u || s : u && s,
          b = t ? c || a : c && a;
        if ("both" === o) return l && v && b;
        if ("vertical" === o) return l && v;
        if ("horizontal" === o) return l && b
      } else {
        var d = i.scrollTop(),
          p = d + h,
          w = i.scrollLeft(),
          m = w + f,
          y = r.offset(),
          z = y.top,
          B = z + r.height(),
          C = y.left,
          R = C + r.width(),
          j = t === !0 ? B : z,
          q = t === !0 ? z : B,
          H = t === !0 ? R : C,
          L = t === !0 ? C : R;
        if ("both" === o) return !!l && p >= q && j >= d && m >= L && H >= w;
        if ("vertical" === o) return !!l && p >= q && j >= d;
        if ("horizontal" === o) return !!l && m >= L && H >= w
      }
    }
  }
}(jQuery);

$(window).scroll(function(event) {
  var div = $('.cm-timeline__path--active'),
    divHeight = div.height(),
    scroll;

  var st = $(this).scrollTop() / 6;
  if ($('.cm-timeline').visible(true)) {
    div.height(divHeight + st)
  } else {
    div.height(divHeight - st)
  }
});

.cm-timeline {
  overflow-x: hidden;
  position: relative;
  padding: 35px 0 44px;
  padding-bottom: 84px;
}

.cm-timeline:before,
.cm-timeline:after {
  position: absolute;
  content: "";
  display: block;
}

.cm-timeline:before {
  width: 417px;
  height: 173px;
  top: 0;
  left: 50%;
  z-index: -1;
  background: url(https://cdn2.hubspot.net/hubfs/493098/images/company-timeline/stars.png) 0 0/100% no-repeat;
  transform: translateX(-50%);
}

.cm-timeline:after {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 158px;
  margin-left: -2px;
  height: 256px;
}

.cm-timeline .cm-timeline__paths {
  position: relative;
}

.cm-timeline .cm-timeline__path {
  padding: 0 25px;
  display: block;
}

.cm-timeline .cm-timeline__path::before {
  top: 0;
  left: calc(50% - 2.5px);
  bottom: 18px;
  position: absolute;
  width: 5px;
  content: "";
  background: #e5e5e5;
}

.cm-timeline .cm-timeline__start {
  position: relative;
  z-index: 10;
  margin-bottom: 93px;
  padding: 25px;
  font-family: CamphorThin;
  font-size: 16px;
  font-weight: 800;
  background: #fff;
  border: 1px solid #00cdac;
  border-radius: 5px;
  box-shadow: 0 18px 32px rgba(0, 0, 0, 0.1);
  width: 345px;
  margin: 0 auto 55px;
}

.cm-timeline .cm-timeline__start-inner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cm-timeline .cm-timeline__start-image {
  width: 94px;
  height: 52px;
  margin-right: 20px;
}

.cm-timeline .cm-timeline__start-title {
  width: auto;
  font-family: CamphorRegular;
  color: color(theme-dark);
  font-size: 18px;
}

.cm-timeline .cm-timeline__company-logo {
  left: 50%;
  bottom: -30px;
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #fff;
  margin-left: -30px;
}

.cm-timeline .cm-timeline__milestone {
  position: relative;
  z-index: 5000;
  margin-bottom: 25px;
  padding: 25px 20px;
  background: #fff;
  border: 1px solid #d8d8d8;
  border-radius: 5px;
  box-shadow: 0 18px 32px rgba(0, 0, 0, 0.1);
  width: 320px;
  margin: 35px auto;
  width: 374px;
}

.cm-timeline .cm-timeline__milestone:nth-child(2n) {
  left: 40px;
  position: relative;
  transform: translateX(50%);
}

.cm-timeline .cm-timeline__milestone:nth-child(odd) {
  right: 40px;
  position: relative;
  transform: translateX(-50%);
}

.cm-timeline .cm-timeline__milestone:nth-child(odd):after {
  right: -6px;
  left: auto;
  transform: rotate(-45deg);
}

.cm-timeline .cm-timeline__milestone:nth-child(odd) .cm-timeline__milestone-year {
  right: auto;
  left: 345px;
}

.cm-timeline .cm-timeline__milestone:nth-child(odd) .cm-timeline__milestone-year:not(.cm-timeline__milestone-year--empty) {
  padding: 0 22px 0 45px;
}

.cm-timeline .cm-timeline__milestone:nth-child(odd) .cm-timeline__milestone-year:not(.cm-timeline__milestone-year--empty):before {
  right: auto;
  left: 0;
}

.cm-timeline .cm-timeline__milestone:nth-child(odd) .cm-timeline__milestone-year:after {
  left: 8px;
}

.cm-timeline .cm-timeline__milestone:nth-child(odd) .cm-timeline__milestone-year {
  left: 399px;
}

.cm-timeline .cm-timeline__milestone:after {
  top: 33px;
  left: -6px;
  position: absolute;
  width: 10px;
  height: 10px;
  content: "";
  display: none;
  background: #fff;
  border-right: 1px solid #d8d8d8;
  border-bottom: 1px solid #d8d8d8;
  transform: rotate(135deg);
  display: block;
}

.cm-timeline .cm-timeline__milestone-inner {
  display: flex;
  align-items: center;
}

.cm-timeline .cm-timeline__milestone-img-wrap {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  margin-right: 15px;
}

.cm-timeline .cm-timeline__milestone-img {
  max-width: 100%;
}

.cm-timeline .cm-timeline__milestone-title {
  font-family: CamphorMedium;
  font-size: 14px;
  line-height: 22px;
  color: color(theme-dark);
  font-size: 16px;
}

.cm-timeline .cm-timeline__milestone-description {
  margin-top: 3px;
  font-size: 15px;
  line-height: 18px;
  color: color(theme-dark-gray);
  font-family: CamphorThin;
}

.cm-timeline .cm-timeline__milestone--with-new-year {
  margin-top: 74px;
  margin-top: 35px;
}

.cm-timeline .cm-timeline__milestone-year {
  top: -50px;
  left: 50%;
  position: absolute;
  width: 100px;
  height: 24px;
  font-family: Sailec;
  text-transform: capitalize;
  font-size: 14px;
  line-height: 24px;
  text-align: center;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 5px 19px rgba(0, 0, 0, 0.09);
  color: #999;
  transform: translateX(-50%);
  width: auto;
  height: 28px;
  top: auto;
  right: 345px;
  left: auto;
  z-index: 10;
  padding: 0 45px 0 22px;
  font-size: 18px;
  line-height: 28px;
  transform: none;
  right: 399px;
}

.cm-timeline .cm-timeline__milestone-year:not(.cm-timeline__milestone-year--empty):before {
  top: 0;
  right: 0;
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  content: "";
  background-color: #fff;
  box-shadow: 0 5px 19px rgba(0, 0, 0, 0.15);
}

.cm-timeline .cm-timeline__milestone-year:after {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  top: 8px;
  right: 8px;
  position: absolute;
  content: "";
  background-color: #e5e5e5;
}

.cm-timeline .cm-timeline__milestone-year--empty {
  width: 28px;
  padding: 0;
}

.cm-timeline .cm-timeline__end {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  margin: 122px auto 0;
  border: 5px solid #e5e5e5;
  width: 18px;
  height: 18px;
  margin-top: 35px;
}

.cm-timeline .cm-timeline__path--active {
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 1%;
  overflow-y: hidden;
  max-height: 100%;
}

.cm-timeline .cm-timeline__path--active:before {
  top: 0;
  left: calc(50% - 2.5px);
  position: absolute;
  height: 100%;
  background: #00cdac;
  z-index: 0;
}

.cm-timeline .cm-timeline__path--active .cm-timeline__start {
  visibility: hidden;
}

.cm-timeline .cm-timeline__path--active .cm-timeline__milestone {
  box-shadow: none;
}

.cm-timeline .cm-timeline__path--active .cm-timeline__end {
  flex: 0 0 auto;
  position: relative;
  background-color: #fff;
  border-color: #00cdac;
}

.cm-timeline .cm-timeline__path--active .cm-timeline__milestone-year {
  box-shadow: none;
  color: #00cdac;
}

.cm-timeline .cm-timeline__path--active .cm-timeline__milestone-year:after {
  background-color: #00cdac;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cm-timeline">
  <div class="cm-timeline__paths">
    <div class="cm-timeline__path">
      <div class="cm-timeline__start">
        <div class="cm-timeline__start-inner">
          <!-- <img srcset="https://cdn2.hubspot.net/hubfs/493098/images/company-timeline/founders.png 1x, https://cdn2.hubspot.net/hubfs/493098/images/company-timeline/founders@2x.png 2x" class="cm-timeline__start-image" alt="founders"> -->
          <div class="cm-timeline__start-title">Project Started</div>
        </div>
        <!-- <img src="assets/images/fleapo-icon.svg" class="cm-timeline__company-logo" alt="company logo"> -->
      </div>
      <div class="cm-timeline__milestone cm-timeline__milestone--with-new-year">
        <div class="cm-timeline__milestone-year">Process</div>
        <div class="cm-timeline__milestone-inner">
          <div class="cm-timeline__milestone-img-wrap">
            <img srcset="https://cdn2.hubspot.net/hubfs/493098/images/company-timeline/sie-pomaga.png 1x, https://cdn2.hubspot.net/hubfs/493098/images/company-timeline/sie-pomaga@2x.png 2x" class="cm-timeline__milestone-img" alt="founders">
          </div>
          <div>
            <div class="cm-timeline__milestone-title">Launch of SiePomaga</div>
            <div class="cm-timeline__milestone-description">the biggest charity website in the country</div>
          </div>
        </div>
      </div>
      <div class="cm-timeline__milestone cm-timeline__milestone--with-new-year">
        <div class="cm-timeline__milestone-year">Ideation</div>
        <div class="cm-timeline__milestone-inner">
          <div class="cm-timeline__milestone-img-wrap">
            <img srcset="https://cdn2.hubspot.net/hubfs/493098/images/company-timeline/sie-pomaga.png 1x, https://cdn2.hubspot.net/hubfs/493098/images/company-timeline/sie-pomaga@2x.png 2x" class="cm-timeline__milestone-img" alt="founders">
          </div>
          <div>
            <div class="cm-timeline__milestone-title">Launch of SiePomaga</div>
            <div class="cm-timeline__milestone-description">the biggest charity website in the country</div>
          </div>
        </div>
      </div>
      <div class="cm-timeline__milestone cm-timeline__milestone--with-new-year">
        <div class="cm-timeline__milestone-year">Collaboration</div>
        <div class="cm-timeline__milestone-inner">
          <div class="cm-timeline__milestone-img-wrap">
            <img srcset="https://cdn2.hubspot.net/hubfs/493098/images/company-timeline/document.png 1x, https://cdn2.hubspot.net/hubfs/493098/images/company-timeline/document@2x.png 2x" class="cm-timeline__milestone-img" alt="founders">
          </div>
          <div>
            <div class="cm-timeline__milestone-title">Start of company's blog</div>
            <div class="cm-timeline__milestone-description">https://netguru.com/blog</div>
          </div>
        </div>
      </div>
      <div class="cm-timeline__milestone cm-timeline__milestone--with-new-year">
        <div class="cm-timeline__milestone-year">Work</div>
        <div class="cm-timeline__milestone-inner">
          <div class="cm-timeline__milestone-img-wrap">
            <img srcset="https://cdn2.hubspot.net/hubfs/493098/images/company-timeline/cup.png 1x, https://cdn2.hubspot.net/hubfs/493098/images/company-timeline/cup@2x.png 2x" class="cm-timeline__milestone-img" alt="founders">
          </div>
          <div>
            <div class="cm-timeline__milestone-title">Netguru wins the Aulery award</div>
            <div class="cm-timeline__milestone-description">for the best tech companies with global potential</div>
          </div>
        </div>
      </div>
      <div class="cm-timeline__milestone cm-timeline__milestone--with-new-year">
        <div class="cm-timeline__milestone-year">Review</div>
        <div class="cm-timeline__milestone-inner">
          <div class="cm-timeline__milestone-img-wrap">
            <img srcset="https://cdn2.hubspot.net/hubfs/493098/images/company-timeline/ios-android.png 1x, https://cdn2.hubspot.net/hubfs/493098/images/company-timeline/ios-android@2x.png 2x" class="cm-timeline__milestone-img" alt="founders">
          </div>
          <div>
            <div class="cm-timeline__milestone-title">Introducing iOS and Android development services</div>
            <div class="cm-timeline__milestone-description"></div>
          </div>
        </div>
      </div>
      <div class="cm-timeline__milestone cm-timeline__milestone--with-new-year">
        <div class="cm-timeline__milestone-year">Optimization</div>
        <div class="cm-timeline__milestone-inner">
          <div class="cm-timeline__milestone-img-wrap">
            <img srcset="https://cdn2.hubspot.net/hubfs/493098/images/company-timeline/ledbury.png 1x, https://cdn2.hubspot.net/hubfs/493098/images/company-timeline/ledbury@2x.png 2x" class="cm-timeline__milestone-img" alt="founders">
          </div>
          <div>
            <div class="cm-timeline__milestone-title">Start of collaboration with Ledbury
            </div>
            <div class="cm-timeline__milestone-description">a US brick &amp; mortar retailer
            </div>
          </div>
        </div>
      </div>
      <div class="cm-timeline__end"></div>
    </div>
    <div class="cm-timeline__path cm-timeline__path--active">
      <div class="cm-timeline__start">
        <div class="cm-timeline__start-inner">
          <!-- <img srcset="https://cdn2.hubspot.net/hubfs/493098/images/company-timeline/founders.png 1x, https://cdn2.hubspot.net/hubfs/493098/images/company-timeline/founders@2x.png 2x" class="cm-timeline__start-image" alt="founders"> -->
          <div class="cm-timeline__start-title">Project Started</div>
        </div>
        <!-- <img src="assets/images/fleapo-icon.svg" class="cm-timeline__company-logo" alt="company logo"> -->
      </div>
      <div class="cm-timeline__milestone cm-timeline__milestone--with-new-year">
        <div class="cm-timeline__milestone-year">Process</div>
        <div class="cm-timeline__milestone-inner">
          <div class="cm-timeline__milestone-img-wrap">
            <img srcset="https://cdn2.hubspot.net/hubfs/493098/images/company-timeline/sie-pomaga.png 1x, https://cdn2.hubspot.net/hubfs/493098/images/company-timeline/sie-pomaga@2x.png 2x" class="cm-timeline__milestone-img" alt="founders">
          </div>
          <div>
            <div class="cm-timeline__milestone-title">Launch of SiePomaga</div>
            <div class="cm-timeline__milestone-description">the biggest charity website in the country</div>
          </div>
        </div>
      </div>
      <div class="cm-timeline__milestone cm-timeline__milestone--with-new-year">
        <div class="cm-timeline__milestone-year">Ideation</div>
        <div class="cm-timeline__milestone-inner">
          <div class="cm-timeline__milestone-img-wrap">
            <img srcset="https://cdn2.hubspot.net/hubfs/493098/images/company-timeline/sie-pomaga.png 1x, ttps://cdn2.hubspot.net/hubfs/493098/images/company-timeline/sie-pomaga@2x.png 2x" class="cm-timeline__milestone-img" alt="founders">
           </div>
          <div>
            <div class="cm-timeline__milestone-title">Launch of SiePomaga</div>
            <div class="cm-timeline__milestone-description">the biggest charity website in the country</div>
          </div>
        </div>
      </div>
      <div class="cm-timeline__milestone cm-timeline__milestone--with-new-year">
        <div class="cm-timeline__milestone-year">Collaboration</div>
        <div class="cm-timeline__milestone-inner">
          <div class="cm-timeline__milestone-img-wrap">
            <img srcset="https://cdn2.hubspot.net/hubfs/493098/images/company-timeline/document.png 1x, https://cdn2.hubspot.net/hubfs/493098/images/company-timeline/document@2x.png 2x" class="cm-timeline__milestone-img" alt="founders">
          </div>
          <div>
            <div class="cm-timeline__milestone-title">Start of company's blog</div>
            <div class="cm-timeline__milestone-description">https://netguru.com/blog</div>
          </div>
        </div>
      </div>
      <div class="cm-timeline__milestone cm-timeline__milestone--with-new-year">
        <div class="cm-timeline__milestone-year">Work</div>
        <div class="cm-timeline__milestone-inner">
          <div class="cm-timeline__milestone-img-wrap">
            <img srcset="https://cdn2.hubspot.net/hubfs/493098/images/company-timeline/cup.png 1x, https://cdn2.hubspot.net/hubfs/493098/images/company-timeline/cup@2x.png 2x" class="cm-timeline__milestone-img" alt="founders">
          </div>
          <div>
            <div class="cm-timeline__milestone-title">Netguru wins the Aulery award</div>
            <div class="cm-timeline__milestone-description">for the best tech companies with global potential</div>
          </div>
        </div>
      </div>
      <div class="cm-timeline__milestone cm-timeline__milestone--with-new-year">
        <div class="cm-timeline__milestone-year">Review</div>
        <div class="cm-timeline__milestone-inner">
          <div class="cm-timeline__milestone-img-wrap">
            <img srcset="https://cdn2.hubspot.net/hubfs/493098/images/company-timeline/ios-android.png 1x, https://cdn2.hubspot.net/hubfs/493098/images/company-timeline/ios-android@2x.png 2x" class="cm-timeline__milestone-img" alt="founders">
           </div>
          <div>
            <div class="cm-timeline__milestone-title">Introducing iOS and Android development services</div>
            <div class="cm-timeline__milestone-description"></div>
          </div>
        </div>
      </div>
      <div class="cm-timeline__milestone cm-timeline__milestone--with-new-year">
        <div class="cm-timeline__milestone-year">Optimization</div>
        <div class="cm-timeline__milestone-inner">
          <div class="cm-timeline__milestone-img-wrap">
            <img srcset="https://cdn2.hubspot.net/hubfs/493098/images/company-timeline/ledbury.png 1x, https://cdn2.hubspot.net/hubfs/493098/images/company-timeline/ledbury@2x.png 2x" class="cm-timeline__milestone-img" alt="founders">
          </div>
          <div>
            <div class="cm-timeline__milestone-title">Start of collaboration with Ledbury
            </div>
            <div class="cm-timeline__milestone-description">a US brick &amp; mortar retailer
            </div>
          </div>
        </div>
      </div>
      <div class="cm-timeline__end"></div>
    </div>
  </div>
</div>

Answer 1

if(i<0)

! function(t) {
  var i = t(window);
  t.fn.visible = function(t, e, o) {
    if (!(this.length < 1)) {
      var r = this.length > 1 ? this.eq(0) : this,
        n = r.get(0),
        f = i.width(),
        h = i.height(),
        o = o ? o : "both",
        l = e === !0 ? n.offsetWidth * n.offsetHeight : !0;
      if ("function" == typeof n.getBoundingClientRect) {
        var g = n.getBoundingClientRect(),
          u = g.top >= 0 && g.top < h,
          s = g.bottom > 0 && g.bottom <= h,
          c = g.left >= 0 && g.left < f,
          a = g.right > 0 && g.right <= f,
          v = t ? u || s : u && s,
          b = t ? c || a : c && a;
        if ("both" === o) return l && v && b;
        if ("vertical" === o) return l && v;
        if ("horizontal" === o) return l && b
      } else {
        var d = i.scrollTop(),
          p = d + h,
          w = i.scrollLeft(),
          m = w + f,
          y = r.offset(),
          z = y.top,
          B = z + r.height(),
          C = y.left,
          R = C + r.width(),
          j = t === !0 ? B : z,
          q = t === !0 ? z : B,
          H = t === !0 ? R : C,
          L = t === !0 ? C : R;
        if ("both" === o) return !!l && p >= q && j >= d && m >= L && H >= w;
        if ("vertical" === o) return !!l && p >= q && j >= d;
        if ("horizontal" === o) return !!l && m >= L && H >= w
      }
    }
  }
}(jQuery);

  var div = $('.cm-timeline__path--active'),
    divHeight = div.height(),
    scroll;
$(window).scroll(function(event) {

  var st = $(this).scrollTop();
  if (!$('.cm-timeline').visible(true)) {
    div.height(divHeight + st)
  } else {
    div.height(divHeight - st)
  }
});

.cm-timeline {
  overflow-x: hidden;
  position: relative;
  padding: 35px 0 44px;
  padding-bottom: 84px;
}

.cm-timeline:before,
.cm-timeline:after {
  position: absolute;
  content: "";
  display: block;
}

.cm-timeline:before {
  width: 417px;
  height: 173px;
  top: 0;
  left: 50%;
  z-index: -1;
  background: url(https://cdn2.hubspot.net/hubfs/493098/images/company-timeline/stars.png) 0 0/100% no-repeat;
  transform: translateX(-50%);
}

.cm-timeline:after {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 158px;
  margin-left: -2px;
  height: 256px;
}

.cm-timeline .cm-timeline__paths {
  position: relative;
}

.cm-timeline .cm-timeline__path {
  padding: 0 25px;
  display: block;
}

.cm-timeline .cm-timeline__path::before {
  top: 0;
  left: calc(50% - 2.5px);
  bottom: 18px;
  position: absolute;
  width: 5px;
  content: "";
  background: #e5e5e5;
}

.cm-timeline .cm-timeline__start {
  position: relative;
  z-index: 10;
  margin-bottom: 93px;
  padding: 25px;
  font-family: CamphorThin;
  font-size: 16px;
  font-weight: 800;
  background: #fff;
  border: 1px solid #00cdac;
  border-radius: 5px;
  box-shadow: 0 18px 32px rgba(0, 0, 0, 0.1);
  width: 345px;
  margin: 0 auto 55px;
}

.cm-timeline .cm-timeline__start-inner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cm-timeline .cm-timeline__start-image {
  width: 94px;
  height: 52px;
  margin-right: 20px;
}

.cm-timeline .cm-timeline__start-title {
  width: auto;
  font-family: CamphorRegular;
  color: color(theme-dark);
  font-size: 18px;
}

.cm-timeline .cm-timeline__company-logo {
  left: 50%;
  bottom: -30px;
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #fff;
  margin-left: -30px;
}

.cm-timeline .cm-timeline__milestone {
  position: relative;
  z-index: 5000;
  margin-bottom: 25px;
  padding: 25px 20px;
  background: #fff;
  border: 1px solid #d8d8d8;
  border-radius: 5px;
  box-shadow: 0 18px 32px rgba(0, 0, 0, 0.1);
  width: 320px;
  margin: 35px auto;
  width: 374px;
}

.cm-timeline .cm-timeline__milestone:nth-child(2n) {
  left: 40px;
  position: relative;
  transform: translateX(50%);
}

.cm-timeline .cm-timeline__milestone:nth-child(odd) {
  right: 40px;
  position: relative;
  transform: translateX(-50%);
}

.cm-timeline .cm-timeline__milestone:nth-child(odd):after {
  right: -6px;
  left: auto;
  transform: rotate(-45deg);
}

.cm-timeline .cm-timeline__milestone:nth-child(odd) .cm-timeline__milestone-year {
  right: auto;
  left: 345px;
}

.cm-timeline .cm-timeline__milestone:nth-child(odd) .cm-timeline__milestone-year:not(.cm-timeline__milestone-year--empty) {
  padding: 0 22px 0 45px;
}

.cm-timeline .cm-timeline__milestone:nth-child(odd) .cm-timeline__milestone-year:not(.cm-timeline__milestone-year--empty):before {
  right: auto;
  left: 0;
}

.cm-timeline .cm-timeline__milestone:nth-child(odd) .cm-timeline__milestone-year:after {
  left: 8px;
}

.cm-timeline .cm-timeline__milestone:nth-child(odd) .cm-timeline__milestone-year {
  left: 399px;
}

.cm-timeline .cm-timeline__milestone:after {
  top: 33px;
  left: -6px;
  position: absolute;
  width: 10px;
  height: 10px;
  content: "";
  display: none;
  background: #fff;
  border-right: 1px solid #d8d8d8;
  border-bottom: 1px solid #d8d8d8;
  transform: rotate(135deg);
  display: block;
}

.cm-timeline .cm-timeline__milestone-inner {
  display: flex;
  align-items: center;
}

.cm-timeline .cm-timeline__milestone-img-wrap {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  margin-right: 15px;
}

.cm-timeline .cm-timeline__milestone-img {
  max-width: 100%;
}

.cm-timeline .cm-timeline__milestone-title {
  font-family: CamphorMedium;
  font-size: 14px;
  line-height: 22px;
  color: color(theme-dark);
  font-size: 16px;
}

.cm-timeline .cm-timeline__milestone-description {
  margin-top: 3px;
  font-size: 15px;
  line-height: 18px;
  color: color(theme-dark-gray);
  font-family: CamphorThin;
}

.cm-timeline .cm-timeline__milestone--with-new-year {
  margin-top: 74px;
  margin-top: 35px;
}

.cm-timeline .cm-timeline__milestone-year {
  top: -50px;
  left: 50%;
  position: absolute;
  width: 100px;
  height: 24px;
  font-family: Sailec;
  text-transform: capitalize;
  font-size: 14px;
  line-height: 24px;
  text-align: center;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 5px 19px rgba(0, 0, 0, 0.09);
  color: #999;
  transform: translateX(-50%);
  width: auto;
  height: 28px;
  top: auto;
  right: 345px;
  left: auto;
  z-index: 10;
  padding: 0 45px 0 22px;
  font-size: 18px;
  line-height: 28px;
  transform: none;
  right: 399px;
}

.cm-timeline .cm-timeline__milestone-year:not(.cm-timeline__milestone-year--empty):before {
  top: 0;
  right: 0;
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  content: "";
  background-color: #fff;
  box-shadow: 0 5px 19px rgba(0, 0, 0, 0.15);
}

.cm-timeline .cm-timeline__milestone-year:after {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  top: 8px;
  right: 8px;
  position: absolute;
  content: "";
  background-color: #e5e5e5;
}

.cm-timeline .cm-timeline__milestone-year--empty {
  width: 28px;
  padding: 0;
}

.cm-timeline .cm-timeline__end {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  margin: 122px auto 0;
  border: 5px solid #e5e5e5;
  width: 18px;
  height: 18px;
  margin-top: 35px;
}

.cm-timeline .cm-timeline__path--active {
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 1%;
  overflow-y: hidden;
  max-height: 100%;
}

.cm-timeline .cm-timeline__path--active:before {
  top: 0;
  left: calc(50% - 2.5px);
  position: absolute;
  height: 100%;
  background: #00cdac;
  z-index: 0;
}

.cm-timeline .cm-timeline__path--active .cm-timeline__start {
  visibility: hidden;
}

.cm-timeline .cm-timeline__path--active .cm-timeline__milestone {
  box-shadow: none;
}

.cm-timeline .cm-timeline__path--active .cm-timeline__end {
  flex: 0 0 auto;
  position: relative;
  background-color: #fff;
  border-color: #00cdac;
}

.cm-timeline .cm-timeline__path--active .cm-timeline__milestone-year {
  box-shadow: none;
  color: #00cdac;
}

.cm-timeline .cm-timeline__path--active .cm-timeline__milestone-year:after {
  background-color: #00cdac;
}

我刚刚从div函数中删除了div的声明及其高度，并且您更改了条件。希望对您有帮助。