1

私はこの「magicbar」ナビゲーションを持っています。これは、ユーザーがイントロ div (その div が画面から消える場所) を過ぎてスクロールするまで非表示のままにしたいと考えています。この SO の質問 hereから JQuery を取得し、この SO question here のように「>=」を「==」に置き換えました。

私は実際に、div の最後に達したというアラートを設定するようにブラウザーに指示しようとしましたが、それも機能しません。また、イベントが発生して画面外に「表示」された場合に備えて、非表示の div をページの中央に移動しようとしました。jQuery がページに読み込まれ、div が正常に非表示になるため、スクリプトの最初の部分が機能しています。機能しないのは肉じゃがじゃがいもです。jQuery初心者なので、なぜこれが機能しないのかわかりません。

これが私のコードです：

<script>
$("#magicnav").hide();
jQuery(function ($) {
    $('#intro').bind('scroll', function () {
       if ($(this).scrollTop() + $(this).innerHeight() == $(this).scrollHeight){
           $("#magicnav").show();
       }
    });
});   
</script>

**更新 ここに問題のjsfiddleがあります。

4

2 に答える 2

1

取得する正しい方法scrollHeightは次のようになります。

$(this)[0].scrollHeight

また

$(this).prop('scrollHeight')
于 2013-11-08T10:17:50.677 に答える
1

私はそれを考え出した。問題は、そもそもdivが「スクロール可能」になるほど大きくなかったため、別の方法で問題に取り組む必要があったという事実に関係していました。This SO question hereの助けのおかげで、以前のコードを完全に捨てて、「div の下部」に集中する代わりに、ページの特定のポイントに到達することに集中しました。

$('#magicnav').hide();
   var target = $(".yellowbg").offset().top;
   var interval = setInterval(function() {
   if ($(window).scrollTop() >= target) {
      $('#magicnav').show();
      clearInterval(interval);
     }
  }, 250);

ここで、「yellowbg」は、以前に対象としていた div の後のページの次のセクションのクラスです。

于 2013-11-08T21:15:22.630 に答える