показать/скрыть DIV, когда прошел другой div

Я хочу показать div показать, прошел ли он другой DIV. например, показать в html ниже, если div.passedMe дно! встретиться в верхней части окна, div.showHide покажет и когда scroll up и div.passedMe вверху! встретиться в верхней части окна div.showHide скроется.показать/скрыть DIV, когда прошел другой div

Html

<div class="passedMe">If you passed this div another div will show/hide</div> 

<div class="showHide"> this div will show/hide</div>

до сих пор это то, что у меня есть, но это только работа, когда прошло определенное PIXEL на странице

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

});

это fiddle

источник

2014-09-04 Ireneo Crodua

так что вы пробовали? – DoXicK

Я думаю, вы пытаетесь сделать какую-то плавающую анимацию. Но я не мог понять, как вам нужно анимировать 2 div's –

написать jsfiddle с кодом, который вы пробовали (mousein, mouseout, show, hide и т. Д.) –

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

И если вы хотите FadeIn/FadeOut то вместо:

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

использования

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

источник

2014-09-04 08:25:34

Я нашел это 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 
    } 
}

источник

2014-09-04 08:11:52 Matthias

Скачать animate.css по этой ссылке http://daneden.github.io/animate.css/ и вызова это в вашем html

Затем добавьте класс «анимированный» в div, и вы можете применить анимацию к вашему div с помощью «data-animation» i.e data-animation = «flipInY». Здесь «flipInY» - это то, как ваш div должен появляться, когда пользователь прокручивается вниз. Вы можете изменить анимацию данных по мере необходимости. Можно также применить задержку для DIV с помощью «данных-анимации», т.е. данных-анимации задержку = «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; 
}

Дон» забудьте включить animate.css в вашем HTML файле

Затем загрузите jQuery.appear из http://plugins.jquery.com/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>

источник

2014-09-04 08:38:26

Вам не нужны все эти плагины. Он просто взвесит ваш сайт и сделает его очень медленным, если вы используете плагин каждый раз, когда вам нужно сделать простой бит jQuery. – DoubleA

простой способ, чтобы получить дивы смещения позиции сверху отношения к высоте окна и сравнить, когда вы прокручиваетесь прошли его и показать скрытые 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(); } 
});

источник

2014-09-04 08:49:41 Tasos

показать/скрыть DIV, когда прошел другой div

ответ

Смежные вопросы