jquery - 仅当滚动位置在 2 点之间时才使用 jQuery 显示 div

Question

我正在尝试弄清楚如何让 div (#tips) 在用户滚动到其包含的 div 高度 (#wrap) 的第二个四分之一时出现，然后在用户滚动到上个季度。所以它会是这样的:

第一季度 - #tips 已隐藏
第二季度 - #tips 可见
第三季度 - #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();
});

任何帮助或建议将不胜感激!

谢谢。

Answer 1

嗨，我发布了demo here ...唯一的问题是，如果您的 #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()...我忘记在演示中更改它，因为最初我使用的是 body 而不是 #wrap。

另一个问题是#wrap 不位于页面顶部。如果它再往下，那么您必须从 scrollTop 中减去它在页面上的位置:

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