Question

我需要在使用jquery在屏幕上看不见div#myDiv-1时显示div#myDiv-2

当页面加载div#myDiv-2可见时，当访问者向下滚动并且div#myDiv-2不再可见时，div#myDiv-1就会显示出来。

抱歉，我不发布任何代码，但我不知道如何开始。

Answer 1

试，

$(function(){
    $('div#myDiv-2').show();
    $('div#myDiv-1').hide();
    $(window).scroll(function(){
       if($('div#myDiv-2').is(":visible"))
       {
           $('div#myDiv-1').show();// shows the first div
           $('div#myDiv-2').hide();// hide the second div
       }
    });
});

Fiddle

Answer 2

你可以这样做，

$(window).scroll(function(){
    if(!$("#myDiv-2").is(":visible")){
         $("#myDiv-1").show();
    }
});

Answer 3

您可以绑定hide事件：

$('#myDiv-2').on('hide',function(){
    $('#myDiv-1').show();
});

Answer 4

要在屏幕上滚动另一个元素时显示一个元素，您可以执行以下操作：

$(window).on('scroll', function() {
    var y  = $(window).scrollTop(),
        e1 = $('#myDiv-1'),
        e2 = $('#myDiv-2'),
        vi = e1.offset().top < (y + $(window).height()) && (e1.offset().top + e1.height()) > y;

    e2.toggle(!vi);
});

FIDDLE

如何使用jquery在屏幕上看不到其他div时显示div？

4 个答案: