4

ページの読み込み時にアニメーション化するプログレスバーがありますが、ページの中央に表示されるため、ユーザーが下にスクロールしたときにアニメーション化する必要があります。現在、ページが読み込まれると、ユーザーにはアニメーションが表示されません。

したがって、基本的に、ユーザーが特定のポイントまでスクロールダウンするまでアニメーションを一時停止する必要があります。バーが表示されると、アニメーションが開始されます。

これが私がこれまでに持っているJavascriptです：

$(function() {
$(".meter > span").each(function() {
    $(this)
        .data("origWidth", $(this).width())
        .width(0)
        .animate({
             width: $(this).data("origWidth")
             }, 1200);
    });
});​

より詳細なjsfiddleは次のとおりです。http：//jsfiddle.net/YAZJb/

4

1 に答える 1

1

これはどう？

jsFiddleを更新しましたhttp://jsfiddle.net/YAZJb/1/

基本的に私がしたのは、クラスであなたのdivにとをwidth:100%;追加することだけでしたposition:fixed;meter

もちろん、あなたの質問を正しく理解できたら？ユーザーがスクロールしても進行状況バーを表示したままにしますか？

アップデート：

inviewプラグインのようなものを使用できます。これがダウンロードで、デモはここにあります。プログレスバー用の独自のスクリプトにラップすると、表示されるまでアニメーションが開始されません。

于 2012-11-08T21:42:55.453 に答える