元素在视口中时添加类的问题

Question

我正在使用Stick-Kit在滚动时将一些图像保持在适当的位置，它似乎正在影响另一个脚本，该脚本通过在div进入视口时向div添加一个类来启动CSS动画。 我假设Sticky-Kit脚本正在“重置”另一个脚本，因为动画仅在删除Sticky-Kit时才发生一次。 当动画div到达屏幕顶部时，该问题可见。 如何确保动画仅出现一次（动画首次出现在视口中）？

http://codepen.io/SeanLindsay1/pen/ZBVyLZ

的HTML

<div id="bg">
  <h2 class="header-title"><span>HEADER</span></h2>

  <div id="pic1">
   1
  </div>

  <div id="pic2">
   2
  </div>

  <div id="pic3">
   3
  </div>

</div>

的CSS

/* STICKY-KIT */
#bg {
    background-color: white;
    width:100%;
    height:1500px;
    padding:0;
    margin:0;
  font-size:30px
}


#pic1 {
    position:relative;
    width:60% ;
    height:500px;
    background-color:blue;
}

#pic2 {
    position:relative;
    width:60% ;
    height:500px;
    background-color:green;
}

#pic3 {
    position:relative;
    width:60% ;
    height:500px;
    background-color:red;
}

/* HEADER TITLES */

.header-title span {
  display: inline-block;
  position: relative;  
}

.change:after {
  content: " ";
  position: absolute;
  height: 5px;
  border-bottom: 1px solid #bebebe;
  -webkit-animation: extend .1s 1 forwards;
  animation: extend 1s 1 forwards;
  margin-left: 4px;
  top: 1.2em !important;
}


@-webkit-keyframes extend {
  0% {
    width: 0;
  }
  100% {
    width: 200px;
  }
}
@keyframes extend {
  0% {
    width: 0;
  }
  100% {
    width: 200px;
  }
}

jQuery的

// Check to see if element is in viewport
function isElementInViewport(elem) {
    var $elem = jQuery(elem);

    // Get the scroll position of the page.
    var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
    var viewportTop = jQuery(scrollElem).scrollTop();
    var viewportBottom = viewportTop + jQuery(window).height();

    // Get the position of the element on the page.
    var elemTop = Math.round( $elem.offset().top ) + 200 ;
    var elemBottom = elemTop + $elem.height();

    return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
}



// Check if it's time to start the animation
function extendLine() {
    var $elem = jQuery('.header-title span').each(function() {

    var $elem = jQuery(this);

    // If the animation has already been started
    if ($elem.hasClass('change')) return;

    if (isElementInViewport($elem)) {
        // Start the animation
        $elem.addClass('change');
    }

    });

}

// Capture scroll events
jQuery(window).scroll(function(){
    extendLine();
});

$("#bg").stick_in_parent();
$("#text").stick_in_parent({offset_top: 390});
$("#pic1").stick_in_parent();
$("#pic2").stick_in_parent();
$("#pic3").stick_in_parent();

Answer 1

删除以下代码行：

$("#bg").stick_in_parent();

确保标题文本块不受Stick-Kit的影响，并消除了重复执行动画的问题，如该codepen所示。

我还没有观察到由该更改引起的任何不良影响，但是我不能保证没有任何不良影响，因为我不知道为什么此行出现在原始代码中。

Answer 2

如果可能的话，可以使用CSS Transition而不是Animation。 它将具有更好的浏览器支持，并且可以工作。 我无法真正发现代码中发生了什么，但是如果您更改了几行，它将按预期工作。

这是一个分叉的Codepen： http ://codepen.io/ddanielbee/pen/BQbQqj

具体行如下：

.header-title span::after {
  content: " ";
  transition: all 1.5s ease-out;
  width: 0;
}

.header-title span.change::after {

  position: absolute;
  height: 5px;
  border-bottom: 1px solid #bebebe;
  width: 200px;
  margin-left: 4px;
  top: 1.2em !important;
}