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

Question

我试图找出当用户滚动到其包含div的高度(#wrap)的第二个四分之一时如何获得div(#tips),然后当用户滚动到最后一个季度时它消失.所以它会是这样的:

第一季度 - #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但是<$ threewowwrapHeight？

为了让它运行,我一直在使用:

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

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

谢谢.

Answer 1

嗨,我在这里发布了一个演示 ...唯一的问题是如果你的#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;