Question

如果他通过了另一个DIV，我想要hidden div节目。例如，如果html底部显示在div.passedMe下方！在窗口顶部，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

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

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

这样的事情。（另）

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

Answer 4

从此链接http://daneden.github.io/animate.css/下载animate.css，并在您的html中调用

然后将“动画”类添加到div中，您可以使用“数据动画”（即data-animation =“flipInY”）将动画应用于div，此处'flipInY'是用户滚动时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>

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

4 个答案: