显示/隐藏DIV时传递的其他div [英] show/hide DIV when passed the other div
本文介绍了显示/隐藏DIV时传递的其他div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想要一个隐藏 div 显示如果他通过另一个DIV。例如，如果 div.passedMe 底部显示在 html 满足窗口顶部， div.showHide 将显示向上滚动和 div.passedMe top！ / p>
< div class =passedMe>如果传递此div，则另一个div将显示/隐藏< / div&
< div class =showHide>此div将显示/隐藏< / div>
到目前为止这是我所拥有的，但这只有当传递一个特定的 PIXEL 在页面上
$（document）.scroll（function（）{
var y = $（this）.scrollTop（）;
if（y> 100）{
$（'。showHide'）。fadeIn（）;
} else {
$（'。showHide'）。fadeOut（）;
}
}）;
这是 fiddle
解决方案
< html&
< head>
< / head>
< body>
< br />< br />< br />< br />< br />< br />< br / >< br />< br />< br />< br />< br />< br /
< div class =passedMe>如果你传递这个div，另一个div会显示/隐藏< / div>
< br />< br />< br />< br />< br />< br />< br / < br />< br />< br />< br />< br />< br />< br /
< div class =showHidestyle =display：none;>此div将显示/隐藏< / div>
< script src =http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.jstype =text / javascript>< ; / script>
< script type =text / javascript>
$（function（）{
$（document）.scroll（function（）{
var vis =（$（document）.scrollTop（）> ）.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 /
< / body>
< / html>
如果您想淡入/淡出，而不是：
$（'。showHide'）css（'display'，vis？''：'none'）;
使用
if（vis）$（'。showHide'）。fadeIn（）; else $（'。showHide'）。fadeOut（）;
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>
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();
}
});
this is the fiddle
解决方案
<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');
use
if (vis) $('.showHide').fadeIn(); else $('.showHide').fadeOut();
这篇关于显示/隐藏DIV时传递的其他div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
