All geek questions in one place

Show / hide DIV when passing another div

I want to show hidden div if it passed another DIV. for example, show in html below if div.passedMe below! meet the top of the window, div.showHide will show, and when scroll up and top div.passedMe ! at the top of the window the 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>

so far this is what I have, but this work only works when transferring a specific PIXEL page to a page

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

this is fiddle

0
source share
4 answers
 <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>

And if you want fadein / fadeout, then instead:

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

using

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

An easy way is to get the offset position of the divs from above, corresponding to the height of the window, and compare when you scroll it and show the hidden div. Check out the demo I prepared.

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

I found this jQuery plugin.

https://github.com/teamdf/jquery-visible/

 if ($('.element').visible(true)) { // Element is visible - do something } else { // Element is NOT visible - do something else }

And then you can try to determine if the user is scrolling.

 window.onscroll = function (e) { // When the window is scrolled. }

So something like this. (Unverified)

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

Download animate.css from this link http://daneden.imtqy.com/animate.css/ and call your html

Then add the "animated" class to the div, and you can apply the animation to your div using "data-animation", that is, data-animation = "flipInY". Here "flipInY" is how your div should appear when custom scrolls are down. You can change the animation of the data as needed. You can also apply a delay to the div using "data-animation" ie 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>

Add include the following code in your css

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

Remember to include animate.css in your html file

Then download jQuery.appear from http://plugins.jquery.com/appear/ and name it in your html

Include the script at the end of the body later

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

Source: https://habr.com/ru/post/1243399/

More articles:


All Articles