1

I need to detect when an HTML element has been completely hidden, I have found many examples and most detect when the div touches the top of the document, in the example is a green line, what I want is to detect when this green line is hidden with the movement of croll.

Edit: I need to detect when the green line that is just after the closing of the label and when it reaches the Top with the movement of the user's Scroll, not detect when the opening of the element that has the edge reaches the top, if not when the closing of the the label that has the green border reaches the top, which is when the complete DIV would be hidden.

$(function(){
   $(window).on('scroll', function() {
      var scrollTop = $(window).scrollTop();
      var elementOffset = $('.element').offset().top;
      var currentElementOffset = (elementOffset - scrollTop);      
      console.log( currentElementOffset );
   });
});
body {
  display: block;
  min-height: 1250px;
  border-bottom: 2px;
}

#content {
  display: block;
  min-height: 250px;
  border-bottom: 5px solid rgb(121,185,0);
  background-color: rgb(250,250,250);
}


#content:after {
  content: "";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
  <div class="element"></div>
</div>
Learning and sharing
  • 1,378
  • 3
  • 25
  • 45
  • Possible duplicate of [Check if element is visible after scrolling](https://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling) – Dexygen Dec 22 '17 at 19:23

1 Answers1

2

You can implement it like this:

  • Check the scroll position of the document against the element's offset + height included.

$(document).ready(function() {
  var scroll_pos = 0;
  $(document).scroll(function() {
    scroll_pos = $(this).scrollTop();
    var element1 = $('#content').offset().top + $('#content').height();
    if (scroll_pos > element1) {
      alert("Passed");
    }
  });
});
body {
  display: block;
  min-height: 1250px;
  border-bottom: 2px;
}

#content {
  display: block;
  min-height: 250px;
  border-bottom: 5px solid rgb(121, 185, 0);
  background-color: rgb(250, 250, 250);
}

#content:after {
  content: "";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
  <div class="element"></div>
</div>
  • Perfect, thank you very much, it's a very quick way to solve this, but I would like to find some way if I have to be comparing the values. Thank you very much. – Learning and sharing Dec 22 '17 at 19:37
  • You can console log the offset of the elements from the top position as you did and make use of the if/else conditional statements with it. –  Dec 22 '17 at 19:38
  • Does this affect the performance of the browser a bit? Have to check this every time the user moves the Scroll? – Learning and sharing Dec 22 '17 at 19:39
  • Well, that is the only way to do it with javascript. You have to check the value of scroll when it moves. –  Dec 22 '17 at 19:40
  • @Learningandsharing No problem :) –  Dec 22 '17 at 19:41