通过另一个 div 时显示/隐藏 DIV
Posted
技术标签:
【中文标题】通过另一个 div 时显示/隐藏 DIV【英文标题】：show/hide DIV when passed the other div 【发布时间】：2014-10-28 21:31:22 【问题描述】：如果他通过另一个 DIV，我想要 hidden div 显示。例如如果div.passedMe 底部显示在html 下面！遇到窗口顶部，div.showHide 将显示，当 scroll up 和 div.passedMe 顶部！遇到div.showHide 将隐藏的窗口顶部。
HTML
<div class="passedMe">If you passed this div another div will show/hide</div>
<div class="showHide"> this div will show/hide</div>
到目前为止，这就是我所拥有的，但这仅在 A 页面上通过某个 PIXEL 时才有效
$(document).scroll(function ()
var y = $(this).scrollTop();
if (y > 100)
$('.showHide').fadeIn();
else
$('.showHide').fadeOut();
);
这是fiddle
【问题讨论】：
那么你尝试了什么？ 我认为您正在尝试做一些浮动动画。但我不明白你需要如何为 2 div 设置动画 用你尝试过的代码（mousein、mouseout、show、hide等）编写一个jsfiddle 【参考方案1】：<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>
如果你想淡入/淡出，那么而不是：
$('.showHide').css('display', vis?'':'none');
使用
if (vis) $('.showHide').fadeIn(); else $('.showHide').fadeOut();
【讨论】：
【参考方案2】：一种简单的方法是从顶部获取与窗口高度相关的 div 偏移位置，并在您滚动时比较它并显示隐藏的 div。检查我准备的Demo。
演示
http://jsfiddle.net/b2sjk9pL/
var p = $( ".passedMe" );
var offset = p.offset();
offset = offset.top;
$(window).scroll(function ()
if ($(window).scrollTop() > offset )
$('.showHide').fadeIn();
else $('.showHide').fadeOut();
);
【讨论】：
【参考方案3】：我找到了这个 Jquery 插件。
https://github.com/teamdf/jquery-visible/
if ($('.element').visible(true))
// Element is visible - do something
else
// Element is NOT visible - do something else
然后你可以尝试检测用户是否滚动。
window.onscroll = function (e)
// When the window is scrolled.
所以是这样的。 （未经测试）
<head>
<script type="text/javascript" src="../jquery.visible.js"></script>
</hed>
window.onscroll = function (e)
if ($('.passedMe').visible(true))
$('.showHide').fadeIn();
else
// Element is NOT visible - do something else
【讨论】：
【参考方案4】：从此链接http://daneden.github.io/animate.css/ 下载 animate.css 并在您的 html 中调用它
然后将类'animated'添加到div，您可以使用'data-animation'将动画应用于您的div下。您可以根据需要更改数据动画。 您还可以使用 'data-animation' 为 div 应用延迟，即 data-animation-delay="400"
<div class="passedMe animated" data-animation="flipInY" data-animation-delay="400">If you passed this div another div will show/hide</div>
<div class="showHide animated" data-animation="fadeIn" data-animation-delay="400"> this div will show/hide</div>
在你的css中添加以下代码
.animated
visibility: hidden;
.visible
visibility: visible;
不要忘记在你的 html 文件中包含 animate.css
然后从http://plugins.jquery.com/appear/下载jQuery.appear并在你的html中调用它
稍后在正文末尾包含以下脚本
<script>
jQuery(function()
jQuery('.animated').appear(function()
var elem = jQuery(this);
var animation = elem.data('animation');
if ( !elem.hasClass('visible') )
var animationDelay = elem.data('animation-delay');
if ( animationDelay )
setTimeout(function()
elem.addClass( animation + " visible" );
, animationDelay);
else
elem.addClass( animation + " visible" );
);
);
</script>
【讨论】：
你不需要所有这些插件。如果您每次需要做一些简单的 jQuery 操作时都使用插件，它只会拖累您的网站并使其变得非常缓慢。以上是关于通过另一个 div 时显示/隐藏 DIV的主要内容，如果未能解决你的问题，请参考以下文章