Question

我使用jQuery可见插件（https://github.com/customd/jquery-visible）来检查元素是否在屏幕上可见（并触发SVG动画）。整个元素必须是可见的，这在垂直空间较小的屏幕上是一个问题。插件确实提供了当元素的任何部分在屏幕上可见时触发的选项，但是如果我使用它，则可能看不到动画。当元素顶部+ 100px可见时，如何触发动画？我想我理解以下脚本在每个阶段都在做什么，但是我无法弄清楚要实现我的目标所做的改变：

(function($){

var $w = $(window);
$.fn.visible = function(partial,hidden,direction){

    if (this.length < 1)
        return;

    var $t        = this.length > 1 ? this.eq(0) : this,
        t         = $t.get(0),
        vpWidth   = $w.width(),
        vpHeight  = $w.height(),
        direction = (direction) ? direction : 'both',
        clientSize = hidden === true ? t.offsetWidth * t.offsetHeight : true;

    if (typeof t.getBoundingClientRect === 'function'){

        // Use this native browser method, if available.
        var rec = t.getBoundingClientRect(),
            tViz = rec.top    >= 0 && rec.top    <  vpHeight,
            bViz = rec.bottom >  0 && rec.bottom <= vpHeight,
            lViz = rec.left   >= 0 && rec.left   <  vpWidth,
            rViz = rec.right  >  0 && rec.right  <= vpWidth,
            vVisible   = partial ? tViz || bViz : tViz && bViz,
            hVisible   = partial ? lViz || lViz : lViz && rViz;

        if(direction === 'both')
            return clientSize && vVisible && hVisible;
        else if(direction === 'vertical')
            return clientSize && vVisible;
        else if(direction === 'horizontal')
            return clientSize && hVisible;
    } else {

        var viewTop         = $w.scrollTop(),
            viewBottom      = viewTop + vpHeight,
            viewLeft        = $w.scrollLeft(),
            viewRight       = viewLeft + vpWidth,
            offset          = $t.offset(),
            _top            = offset.top,
            _bottom         = _top + $t.height(),
            _left           = offset.left,
            _right          = _left + $t.width(),
            compareTop      = partial === true ? _bottom : _top,
            compareBottom   = partial === true ? _top : _bottom,
            compareLeft     = partial === true ? _right : _left,
            compareRight    = partial === true ? _left : _right;

        if(direction === 'both')
            return !!clientSize && ((compareBottom <= viewBottom) && (compareTop >= viewTop)) && ((compareRight <= viewRight) && (compareLeft >= viewLeft));
        else if(direction === 'vertical')
            return !!clientSize && ((compareBottom <= viewBottom) && (compareTop >= viewTop));
        else if(direction === 'horizontal')
            return !!clientSize && ((compareRight <= viewRight) && (compareLeft >= viewLeft));
    }
};

})(jQuery);

可在http://upright.cloudlevel.me查看当前的工作脚本你需要＆gt; 768x700px视口高度可以看到动画。

编辑 - 我让它部分工作，但现在所有动画都会在第一个适用元素进入视图时立即启动。如何在进入视图时触发每个适用的元素？我的脚本现在是：

$(function() {
var animated = $('.js-animate'),
    distance = $(animated).offset().top,
    $window = $(window);
replaceWithPaths(animated);
hideSVGPaths(animated);

$window.scroll(function() {

    $(animated).each(function(i) {

        if ( $window.scrollTop() >= distance ) {
            startSVGAnimation(this);
            animated.splice(i,1);
        }
    });

});
});

Answer 1

如果没有插件

，你能不能这样做

您可以使用$(document).height()来获取窗口的高度

和elementName.offset().top获取元素与顶部的距离。

然后你可以比较它们

if (elementName.offset().top+100 < $(document).height()) {
    //run animation
}

注意：您可能需要稍微更改此设置才能使用document.scrollTop()

进行滚动

检查顶部+ 100px的元素是否可见

1 个答案: