2011-12-22 18 views
1

私は訪問者がページをある程度遠くにスクロールするまで延期したいフローティング/スタティックツールバーを持っています。私はdelay()とscroll()関数を使用しようとしましたが、成功しませんでした。私は正しいトレイルにいる可能性がありますが、構文が正しくありません。遅延を表示するdiv

たとえば、これは私のツールバー(下)です...スクリプト(javascript/jquery)の表示を遅らせるにはスクリプトで何が必要でしょうか?そして、私たちがそれを見ている間に、それを消す方法はありますか?

<div class="toolbar"> 
<ul></ul> 
</div> 

答えて

1

以下のJQueryスクリプトは、ユーザーがページをスクロールしたときにツールバーdivを表示します。

注:イベントが発生するためにはページをスクロール可能にする必要があります。そのため、ページのコンテンツはウィンドウよりも高い必要があります。

<script> 
    $(window).scroll(function() { 
    $(".toolbar").fadeIn("slow"); 
    }); 
</script> 

このスクリプトは、あらかじめ設定された遅延の後にツールバーのdivをフェードインします。

<script> 
    $(document).ready(function() { 
    $(".toolbar").delay(800).fadeIn(10000); 
    }); 
</script> 

置き直接あなたのページの開閉</body>タグ上記のスクリプトのいずれか、あなたはありがとうご<head>セクション

+0

にjQueryライブラリへのリンクを持っていることを確認。私は近くにいたが、これは理にかなっている。ただし、スクリプトが機能しないため、jqueryの競合が発生する必要があります。 – Scott

+0

私が作ったこれらの例を見てください。ツールバー要素は読み込み時に非表示にする必要があります。 http://benjaminhopkins.co.uk/stackoverflow/load.html http://benjaminhopkins.co.uk/stackoverflow/scroll.html –

+0

私はディスプレイを追加することを忘れていた:none ... doh!私はまだjqueryの衝突があることに気づいた。特定のjsスクリプトを追加しても機能しません。しかし、jsスクリプトを追加すると、作成したとおりに機能しますが、サイト上の他のjqueryベースの機能、特にprettyPhotoとtubepressが機能しなくなります。このサイトはWPベースで、私が使用するテーマにはprettyPhoto jsが組み込まれています。私はすべてのjqueryステートメントと使用を圧縮するために別の質問を開始する必要があるかもしれないと思う。 – Scott