11

<div class="">ユーザーがその div まで下にスクロールすると、要素がフェードインします。

jQueryプラグインを使用したソリューションと、divがページに表示されているかどうかを確認する別のソリューションを見つけました。できます。

ただし、ユーザーがdivの一番上までスクロールするとすぐにフェードインするため、ユーザーはdivのフェードインを見ることができません。ユーザーがdivの一番下までスクロールした場合にのみdivをフェードインするにはどうすればよいですかユーザーが div 全体の素敵なフェードイン効果を見ることができるように div?

4

2 に答える 2

11

この JavaScript コードは、現在使用しているものと似ている可能性があります。唯一の違いは、使用されているオフセットです。これは単にターゲット要素のoffset().top()+ 要素のheight(). 要素の下部が表示されると、デモ コードはいくつかの要素でフェード イン<li>します。

tiles = $("ul#tiles li").fadeTo(0,0);

$(window).scroll(function(d,h) {
    tiles.each(function(i) {
        a = $(this).offset().top + $(this).height();
        b = $(window).scrollTop() + $(window).height();
        if (a < b) $(this).fadeTo(500,1);
    });
});

デモ: jsfiddle.net/Marcel/BP6rq (フルスクリーン)

于 2011-03-20T11:25:15.803 に答える
9

jQuery プラグインを使用したとおっしゃいましたが、 jQuery ウェイポイントプラグインを試したかどうかはわかりません。次のようにオフセット オプションをプラグインに渡すことで、このプラグインを使用して簡単に実行できます。

// by default your element will be hidden
$('div').hide();
// call waypoint plugin
$('div').waypoint(function(event, direction) {
    // do your fade in here
    $(this).fadeIn();
}, {
   offset: function() {
       // The bottom of the element is in view
       return $.waypoints('viewportHeight') - $(this).outerHeight();
    }
});

offset : ウェイポイントをトリガーするために、要素の上部がブラウザー ウィンドウの上部からどれだけ離れている必要があるかを決定します。ピクセル数として取得される数値、ビューポートの高さのパーセンテージを表す文字列、またはピクセル数を返す関数を指定できます。

したがって、前の例では、ページの中央にない限り、div はフェードインしません。

于 2011-03-20T11:11:12.187 に答える