通过另一个 div 时显示/隐藏 DIV答案

【问题标题】：show/hide DIV when passed the other div通过另一个 div 时显示/隐藏 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

标签： jquery css jquery-ui

【解决方案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 操作时都使用插件，它只会拖累您的网站并使其变得非常缓慢。