Question

我使用Stick-Kit在滚动时保留一些图像，并且它似乎影响了另一个脚本，它通过在进入视口时向div添加一个类来启动CSS动画。我认为Sticky-Kit脚本正在重置＆＃39;另一方面，因为只有当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的影响，并消除重复执行动画的问题，如this codepen所示。

我还没有观察到这种变化造成的任何不良影响，但我不能保证没有任何影响，因为我不知道为什么这条线在原始代码中。

Answer 2

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

这是一个分叉的代码：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;
}

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

2 个答案: