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

我试图找出当用户滚动到其包含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; 

Answer 2

怎么样：

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