0

Fid: https://jsfiddle.net/qcng3q7j/2/ 

$(function(){

    $(window).scroll(function() {
    
      $(".hey").each( function(i){
 var bottomHeader = $(this).offset().top + $(this).height();
 console.log(bottomHeader);
 var bottomWindow = $(window).scrollTop() + $(window).height();

            if( bottomWindow > bottomHeader ){
                $(this).fadeIn(500);
         
            }
            
            });
    });

});
.hey{
  position:absolute;
  top:500px;
  height:300px;
  width:500px;
  background:red;
  display:none;
}
body{
height:5000px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="hey">
  asgasgasg
</div>

I'm trying to have the div fade in when the scroll hits the top of an element or bottom of an element and also fadeout when it's not on the element.

I've done the part where it should fadeIn when it hits the top but why is the elemnent fading in as soon as I scroll instead of when I hit the top of the element?

Snorlax
  • 3,081
  • 5
  • 24
  • 55
  • 1
    Possible duplicate of [Check if element is visible after scrolling](http://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling) – Dekel Sep 04 '16 at 17:09
  • You can use `Element.getBoundingClientRect()`, see http://stackoverflow.com/questions/29140800/jquery-trigger-when-2-3s-of-div-are-in-viewport/29142018#29142018 – guest271314 Sep 04 '16 at 17:11

0 Answers0