進入查看端口的時間軸更改CSS

Question

我正在嘗試像本網站一樣在滾動條上更改時間軸的背景色。我復制的示例是開發網站 。 看看我嘗試使用的Codepen 。 我最復制它的是下面的代碼，它使每個時間軸上的顏色更改在滾動時閃爍開/關。

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鏈接： 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');
      }
    });
  });

繼續滾動每個循環可能無法正常工作。