CODEWITHSUNDEEP
jquerycssjquery-ui
Ireneo Crodua
Ireneo Crodua

Reputation: 398

show/hide DIV when passed the other div

I want a hidden div show if he passed the another DIV. for example show in html below if div.passedMe bottom! meet the top of the window, the div.showHide will show and when scroll up and the div.passedMe top! meet the top of the window the div.showHide will hide.

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 only work when passed a certain PIXEL on A page

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

});

this is the fiddle

Upvotes: 0

Views: 5559

Answers (4)

Tasos
Tasos

Reputation: 5361

An easy way is to get the divs offset position from the top relevant to the window height and compare when you scrolled passed it and show the hidden div. Check 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(); }
});

Upvotes: 1

Jadran Josimovic
Jadran Josimovic

Reputation: 86

<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 wish to fadein/fadeout then instead of:

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

use

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

Upvotes: 1

Adarsh Gowda K R
Adarsh Gowda K R

Reputation: 951

Download animate.css from this link http://daneden.github.io/animate.css/ and call it in your html

Then add class 'animated' to div and you can apply a animation to your div by using 'data-animation' i.e data-animation="flipInY", Here 'flipInY' is how your div should be appear when user scrolls down. You can change the data-animation as you required. You can also apply delay for the div by using 'data-animation' i.e 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;
}

Don't forget to include animate.css in your html file

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

Later include following the script at the end of body

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

Upvotes: 0

Matthias
Matthias

Reputation: 181

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 detect if user scroll.

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

So something like this. (untested)

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

Upvotes: 0

Related Questions