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

Timeline change css on enter view port

本文关键字：时间 css 视图 输入      更新时间：2023-09-26

我正试图像在这个网站上一样更改滚动时间线的背景色。我复制的样本是开发网站。看看我试过用的电笔。我最接近复制它的是下面的代码，它使每个时间轴圆圈上的颜色在滚动时闪烁。

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);
});

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

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

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

相关文章：