Jquery erkennen, wenn ein Element vollständig mit Scroll-Bewegung

Question

Ich muss erkennen, wenn ein HTML-Element vollständig ausgeblendet wurde, habe ich viele Beispiele gefunden und die meisten erkennen, wenn das div berührt den oberen Rand des Dokuments, im Beispiel ist a grüne Linie, was ich möchte, ist zu erkennen, wenn diese grüne Linie mit der Bewegung von Croll versteckt ist.

Edit: Ich muss erkennen, wenn die grüne Linie, die gerade nach dem Schließen des Etiketts und wenn es die Oberseite mit der Bewegung des Benutzers Scroll erreicht, nicht erkennen, wenn die Öffnung des Elements, das hat Kante erreicht die Spitze, wenn nicht, wenn das Schließen des Labels, das den grünen Rand hat, den oberen Rand erreicht, bei dem der komplette DIV verborgen wäre.

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

Answer 1

Sie können es wie folgt implementieren:

• Überprüfen Sie die Bildlaufposition des Dokuments gegen das Element des enthalten + Höhenversatz.

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