web-dev-qa-db-ja.com

jQueryを使用して、スクロール位置が2ポイントの間にある場合にのみdivを表示します

ユーザーがdivの高さ（#wrap）の第2四半期にスクロールしたときにdiv（#tips）を表示し、ユーザーが最後の四半期にスクロールしたときに表示されないようにする方法を模索しています。したがって、次のようになります。

第1四半期-＃tipsは非表示
第2四半期-＃tipsが表示されます
第3四半期-＃tipsが表示されます
第4四半期-＃tipsは非表示

私はjQueryにほぼ完全に慣れていませんが、これまでに得たものは次のとおりです。

function addKeyboardNavigation(){
 // get the height of #wrap
 var $wrapHeight = $('#wrap').outerHeight()
 // get 1/4 of wrapHeight
 var $quarterwrapHeight = ($wrapHeight)/4
 // get 3/4 of wrapHeight
 var $threequarterswrapHeight = 3*($wrapHeight)
 // check if we're over a quarter down the page
 if( $(window).scrollTop() > $quarterwrapHeight ){
  // if we are show keyboardTips
  $("#tips").fadeIn("slow");
 }
}

これは私が混乱するところです。スクロール位置が$ quarterwrapHeightを超えているが$ threequarterswrapHeight未満であるかどうかを確認するにはどうすればよいですか？

それを実行するために、私は使用してきました：

// Run addKeyboardNavigation on scroll
$(window).scroll(function(){
 addKeyboardNavigation();
});

どんな助けや提案も大歓迎です！

ありがとう。

jqueryscroll
11
Rik

こんにちは私は投稿しました デモはこちら ...唯一の問題は、＃wrap divの高さが十分でない場合、ウィンドウの上部が3/4の高さにならないため、ツールチップが勝ちましたフェードアウトしません。コードは次のとおりです。

$(document).ready(function(){
 $(window).scroll(function(){
  // get the height of #wrap
  var h = $('#wrap').height();
  var y = $(window).scrollTop();
  if( y > (h*.25) && y < (h*.75) ){
   // if we are show keyboardTips
   $("#tips").fadeIn("slow");
  } else {
   $('#tips').fadeOut('slow');
  }
 });
})

height()を使用しましたが、outerHeight()...を使用できます。元々は#wrapの代わりにbodyを使用していたため、デモで変更するのを忘れました。

もう1つの問題は、＃wrapがページの上部にない場合です。さらに下にある場合は、ページ上の位置をscrollTopから差し引く必要があります。

var y = $(window).scrollTop() - $('#wrap').position().top;
29
Mottie

どうですか：

if(($(window).scrollTop() > $quarterwrapHeight) && ($(window).scrollTop() < $threequarterswrapHeight)){
   $("#tips").fadeIn("slow");
} else {
   $("#tips").fadeOut("slow");
}
1
zaf