传递另一个div时显示/隐藏DIV

如果他通过了另一个DIV，我想要一个hidden div节目。 例如，如果div.passedMe底部显示在html下面！ 遇到窗口顶部， div.showHide将显示，当scroll up和div.passedMe顶部！ 遇到div.showHide会隐藏的窗口顶部。

HTML

 
If you passed this div another div will show/hide
 
 this div will show/hide 

到目前为止这是我所拥有的，但这只有在A页面上传递某个PIXEL时才有效

 $(document).scroll(function () { var y = $(this).scrollTop(); if (y > 100) { $('.showHide').fadeIn(); } else { $('.showHide').fadeOut(); } }); 

这是小提琴

Answer 1

     















 
If you passed this div another div will show/hide
 













 
 this div will show/hide
   















 















 















 















   

如果你希望淡出/淡出然后代替：

 $('.showHide').css('display', vis?'':'none'); 

使用

 if (vis) $('.showHide').fadeIn(); else $('.showHide').fadeOut(); 

Answer 2

一个简单的方法是从顶部相关的窗口高度获取divs偏移位置，并在滚动时比较它并显示隐藏的div。 检查我准备的演示。

演示

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(); } }); 

Answer 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. } 

所以这样的事情。 （另）

    window.onscroll = function (e) { if ($('.passedMe').visible(true)) { $('.showHide').fadeIn(); } else { // Element is NOT visible - do something else } } 

Answer 4

从这个链接http://daneden.github.io/animate.css/下载animate.css并在你的HTML中调用它

然后将类’animated’添加到div中，您可以使用’data-animation’（即data-animation =“flipInY”）将动画应用于div，这里’flipInY’是用户向下滚动时div的显示方式。 您可以根据需要更改数据动画。 你也可以使用’data-animation’来应用div的延迟，即data-animation-delay =“400”

 
If you passed this div another div will show/hide
 
 this div will show/hide 

添加在您的CSS中包含以下代码

 .animated { visibility: hidden; } .visible{ visibility: visible; } 

不要忘记在你的html文件中包含animate.css

然后从http://plugins.jquery.com/appear/下载jQuery.appear并在你的html中调用它

之后包括在主体末尾的脚本