2

inview.js スクリプトを操作する方法を知りたいのですが、それが起動された瞬間はビューポートの最初のピクセルではなく、最後に要素が出て行くときではなく、たとえば 50 ピクセル前後です。inview.jsのスクリプトは

(function ($) {
function getViewportHeight() {
    var height = window.innerHeight; // Safari, Opera
    var mode = document.compatMode;

    if ( (mode || !$.support.boxModel) ) { // IE, Gecko
        height = (mode == 'CSS1Compat') ?
        document.documentElement.clientHeight : // Standards
        document.body.clientHeight; // Quirks
    }

    return height;
}

$(window).scroll(function () {
    var vpH = getViewportHeight(),
        scrolltop = (document.documentElement.scrollTop ?
            document.documentElement.scrollTop :
            document.body.scrollTop),
        elems = [];

    // naughty, but this is how it knows which elements to check for
    $.each($.cache, function () {
        if (this.events && this.events.inview) {
            elems.push(this.handle.elem);
        }
    });

    if (elems.length) {
        $(elems).each(function () {
            var $el = $(this),
                top = $el.offset().top,
                height = $el.height(),
                inview = $el.data('inview') || false;

            if (scrolltop > (top + height) || scrolltop + vpH < top) {
                if (inview) {
                    $el.data('inview', false);
                    $el.trigger('inview', [ false ]);                        
                }
            } else if (scrolltop < (top + height)) {
                if (!inview) {
                    $el.data('inview', true);
                    $el.trigger('inview', [ true ]);
                }
            }
        });
    }
});

// kick the event to pick up any elements already in view.
// note however, this only works if the plugin is included after the elements are bound to 'inview'
$(function () {
    $(window).scroll();
});
})(jQuery);

すべてのクレジットはここに移動します

私の試みは、動作するオフセットトップtop = $el.offset().top + 50,に値を追加することでした! しかし、どうすればボトムアップの値を変更できますか? ありがとうテッド

4

1 に答える 1

1

http://imakewebthings.com/jquery-waypoints/を使用することをお勧めします

下から 10% で目的の効果を達成するために、次のように呼び出すことができます。

    $('.flyIn').waypoint(function() {
    $(this).removeClass('hidden');
    $(this).addClass('animated fadeInUp');
    }, { offset: '90%' });
于 2013-10-10T20:11:23.483 に答える