仅当滚动位置在 2 点之间时，才使用 jQuery 显示 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2592420/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Use jQuery to show a div only when scroll position is between 2 points
提问by Rik
I'm trying to work out how to get a div (#tips) to appear when the user scrolls into the 2nd quarter of its containing div's height (#wrap), and then have it disappear when the user scrolls into the last quarter. So it would be like this:
我正在尝试弄清楚如何在用户滚动到其包含 div 高度 (#wrap) 的第二个季度时显示 div (#tips)，然后在用户滚动到最后一个季度时让它消失。所以它会是这样的：
1st quarter - #tips is hidden
2nd quarter - #tips is visible
3rd quarter - #tips is visible
4th quarter - #tips is hidden
第一季度 - #tips 隐藏
第二季度 - #tips 可见
第三季度 - #tips 可见
第四季度 - #tips 隐藏
I'm almost completely new to jQuery but what I've got so far is this:
我对 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");
}
}
This is where I get confused. How can I check if the scroll position is > $quarterwrapHeight but < $threequarterswrapHeight?
这是我感到困惑的地方。如何检查滚动位置是否 > $quarterwrapHeight 但 < $threefourswrapHeight？
To make it run I've been using:
为了让它运行，我一直在使用：
// Run addKeyboardNavigation on scroll
$(window).scroll(function(){
addKeyboardNavigation();
});
Any help or suggestions would be greatly appreciated!
任何帮助或建议将不胜感激！
Thanks.
谢谢。
回答by Mottie
Hi I posted a demo here... the only problem is if your #wrap div isn't tall enough, the top of the window will never get to the 3/4 height, so the tooltip won't fade out. Here is the code:
嗨，我在这里发布了一个演示......唯一的问题是如果你的 #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');
}
});
})
I used height()but you can use outerHeight()... I forgot to change it in the demo because originally I was using the bodyinstead of the #wrap.
我用过，height()但你可以用outerHeight()......我忘了在演示中更改它，因为最初我使用的是body而不是#wrap.
Another problem would be if the #wrap isn't located at the top of the page. If it's further down, then you'll have to subtract it's position on the page from the scrollTop:
另一个问题是 #wrap 不在页面顶部。如果它更靠下，那么您必须从 中减去它在页面上的位置scrollTop：
var y = $(window).scrollTop() - $('#wrap').position().top;
回答by zaf
How about:
怎么样：
if(($(window).scrollTop() > $quarterwrapHeight) && ($(window).scrollTop() < $threequarterswrapHeight)){
$("#tips").fadeIn("slow");
} else {
$("#tips").fadeOut("slow");
}
