进入视口时的时间轴更改 css

Question

我正在尝试更改滚动时间轴的背景颜色，就像我尝试使用的 this site.My replication of the sample is development site. Take a look at the codepen 一样。我最接近复制它的是下面的代码，它使每个时间轴圆上的颜色变化在滚动时闪烁 on/off。

jQuery(document).ready(function($) {
function onScroll() {
  $('.cd-timeline-block').each( function() {
    if( $(this).offset().top <= $(window).scrollTop()+$(window).height()*0.05 && $(this).find('.cd-timeline-img').hasClass('cd-inactive') ) {
      $(this).find('.cd-timeline-img').removeClass('cd-inactive').addClass('cd-active');
      $(this).find('.cd-date').addClass('cd-ssf-color');
    } else {
      $(this).find('.cd-timeline-img').addClass('cd-inactive').removeClass('cd-active');
      $(this).find('.cd-date').removeClass('cd-ssf-color');
    }
  });
};

$(window).scroll(onScroll);
});

Answer 1

我对上面的代码做了一些修改

CodePen link: http://codepen.io/anon/pen/KzqWVm

Javascript:

jQuery(document).ready(function($) {
  var $timeline_block = $('.cd-timeline-block');
  var firstelm = $timeline_block.first();

    //on scolling, show/animate timeline blocks when enter the viewport
    $(window).on('scroll', function() {
      var _win = $(window), iselm = null;
      $timeline_block.each(function(index) {
        var _this = $(this);
        if (((_this.offset().top - _win.height())) <= (_win.scrollTop())) {
          iselm = _this;
        }

      });
      if (_win.scrollTop() < $(firstelm).offset().top) {
        iselm = $(firstelm);
      }

      if (iselm) {
        $('.cd-active').removeClass('cd-active').addClass('cd-inactive');
          iselm.find('.cd-timeline-img').removeClass('cd-inactive').addClass('cd-active');

        if ((iselm.offset().top - _win.height()) > (_win.scrollTop() * 0.75)) {
          $('.cd-date').removeClass('cd-ssf-color');
        }
        iselm.find('.cd-date').addClass('cd-ssf-color');
      }
    });
  });

继续滚动每个循环可能无法正常工作。

进入视口时的时间轴更改 css

Timeline change css on enter view port

javascript

css

jquery

timeline.js