2012-11-02 15 views
13

これが見つかりましたが、これはページの最後の100px前です。私はそれをページの上部から100ピクセル必要です。私はそれを実装する方法を知っている、私は他のjqueryのアニメーションを行った、ちょうどこれにする必要があります。ページの上部から100pxをスクロールした後にdivを表示

$(window).scroll(function(){ 
    if($(window).scrollTop() + 100 > $(document).height() - $(window).height()){ 

    alert("at bottom"); 

    } 
}); 

そしてまた、私はdiv要素が戻っ100pxに前にアップしたときに、ユーザーのスクロールを消えるので、これを逆にする方法を知っておく必要があります。

これはナビゲーションバーに使用されます。

EDIT2>これも働いていた:

$(window).scroll(function(){ 
    if($(window).scrollTop() > 100){ 
     $("#div").fadeIn("slow"); 
    } 
}); 
$(window).scroll(function(){ 
    if($(window).scrollTop() < 100){ 
     $("#div").fadeOut("fast"); 
    } 
}); 

答えて

24

はこれを試してみてください:

$(window).scroll(function() { 
    if ($(window).scrollTop() > 100) { 
     // > 100px from top - show div 
    } 
    else { 
     // <= 100px from top - hide div 
    } 
}); 
+0

あなたがこれに答えてからいくつかの情報を追加したと思います。私はあなたが今までに与えたことを試みます。ありがとう! – DiscoveryOV

+0

@ R3TRI8UTI0Nいいえ、私はあなたのために私の答えを更新しました –

+0

これは動作します。私のポストを更新した後、私はそれを自分の手に入れて解決し、私のポストでEdit2の下にリストされているものを思いつきました。助けてくれてありがとう! – DiscoveryOV

10

はこれを試してみてください:

var menu = $("nav"); 
$(window).scroll(function(){ 
    //more then or equals to 
    if($(window).scrollTop() >= 100){ 
     menu.show(); 

    //less then 100px from top 
    } else { 
    menu.hide(); 

    } 
}); 
+2

なぜこれがダウン投票になったのですか? Roryがまったく同じ回答を投稿したからといって、あなたは参考に、私の答えの1時間後に14:04に彼の答えに変更を加えたことが分かります。 –

3

私はこれを行うことをお勧めします:

$("#divname").hide(); 
$(window).scroll(function() { 
    if ($(window).scrollTop() > 100) { 
     $("#divname").fadeIn("slow"); 
    } 
    else { 
     $("#divname").fadeOut("fast"); 
    } 
}); 

あなたのページにアクセスすると、divは既に非表示になっています。それが表示され、その後、フェードアウトを実行することになり

$("#divname").hide() 

:このなし

。それはあなたが望むものではありません。

関連する問題