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

我正在尝试找出如何使div（#tips）在用户滚动到其包含div高度的第二个四分之一（#wrap）时出现，然后在用户滚动到最后一个四分之一时消失。因此它将是这样的：

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

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

谢谢。

最佳答案

嗨，我张贴了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;