通过另一个 div 时显示/隐藏 DIV [英] show/hide DIV when passed the other div
本文介绍了通过另一个 div 时显示/隐藏 DIV的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如果他通过另一个 DIV,我想要一个 hidden
div
显示.例如显示在html
下面如果div.passedMe
底部!遇到窗口顶部,div.showHide
将显示,当 scroll up
和 div.passedMe
顶部!遇到 div.showHide
将隐藏的窗口顶部.
I want a hidden
div
show if he passed the another DIV. for example show in html
below if div.passedMe
bottom! meet the top of the window, the div.showHide
will show and when scroll up
and the div.passedMe
top! meet the top of the window the div.showHide
will hide.
HTML
<div class="passedMe">If you passed this div another div will show/hide</div>
<div class="showHide"> this div will show/hide</div>
到目前为止,这就是我所拥有的,但这只有在页面上传递某个 PIXEL
时才有效
so far this is what I have but this only work when passed a certain PIXEL
on A page
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 100) {
$('.showHide').fadeIn();
} else {
$('.showHide').fadeOut();
}
});
这是小提琴
推荐答案
<html>
<head>
</head>
<body>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div class="passedMe">If you passed this div another div will show/hide</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div class="showHide" style="display:none;"> this div will show/hide</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$(document).scroll(function(){
var vis = ($(document).scrollTop() > ($('.passedMe').offset().top+$('.passedMe').height()));
$('.showHide').css('display', vis?'':'none')
});
});
</script>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>
如果你想淡入/淡出,那么代替:
And if you wish to fadein/fadeout then instead of:
$('.showHide').css('display', vis?'':'none');
使用
if (vis) $('.showHide').fadeIn(); else $('.showHide').fadeOut();
这篇关于通过另一个 div 时显示/隐藏 DIV的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文