进入视口时，我正在使用以下pen by Bramus来使（FadeInUp）div动画化。但是，当前div仅在div完全位于视口中时才开始渐入。我需要的是当div在视口内达到某个像素时可以灵活地启动动画。例如，当div在视口中为100像素时，它将启动动画FadeInUp。如何使用当前使用的代码/笔（请参见下面的代码）执行此操作？
用百分比也可以吗？ F.e.当div在视口中占20％时，动画开始播放吗？
谢谢。
jQuery(function($) {
// Function which adds the 'animated' class to any '.animatable' in view
var doAnimations = function() {
// Calc current offset and get all animatables
var offset = $(window).scrollTop() + $(window).height(),
$animatables = $('.animatable');
// Check all animatables and animate them if necessary
$animatables.each(function(i) {
var $animatable = $(this);
if (($animatable.offset().top + $animatable.height() - 20) < offset) {
$animatable.removeClass('animatable').addClass('animated');
}
});
};
// Hook doAnimations on scroll, and trigger a scroll
$(window).on('scroll', doAnimations);
$(window).trigger('scroll');
});
最佳答案
代码中已经预见到了偏移。在此行中调整20的值：if (($animatable.offset().top + $animatable.height() - 20) < offset) {
您可能还需要将-符号更改为+以适合您的需求。