Question

尝试在this site上滚动时更改时间轴的背景颜色。我的样本复制为development site。看看我尝试过使用的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');
      }
    });
  });

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

时间轴更改css进入视图端口

1 个答案: