Jquery verifica se l’elemento è visibile in viewport

Funzione per verificare se la class di div “media” si trova all’interno della finestra di visualizzazione visuale del browser indipendentemente dalla posizione di scorrimento della finestra.

  My first HTML document   

Cercando di usare questo plugin https://github.com/customd/jquery-visible con questa funzione ma non so come farlo funzionare.

 $('#element').visible( true ); 

Bene, come hai provato a farlo funzionare? Secondo la documentazione di quel plugin, .visible() restituisce un valore booleano che indica se l’elemento è visibile. Quindi lo useresti in questo modo:

 if ($('#element').visible(true)) { // The element is visible, do something } else { // The element is NOT visible, do something else } 

Controlla se l’elemento è visibile in viewport senza plugin:

Determinare innanzitutto le posizioni superiore e inferiore dell’elemento. Quindi determinare la posizione del fondo della finestra (rispetto alla parte superiore della pagina) aggiungendo la posizione di scorrimento all’altezza del viewport.

Se la posizione inferiore della finestra è maggiore della posizione superiore dell’elemento E la posizione superiore della finestra è inferiore alla posizione inferiore dell’elemento, l’elemento si trova nella vista (almeno parzialmente). In termini più semplici, quando una qualsiasi parte dell’elemento si trova tra i limiti superiore e inferiore della finestra, l’elemento è visibile sullo schermo.

Ora puoi scrivere un’istruzione if / else, in cui l’istruzione if viene eseguita solo quando viene soddisfatta la condizione precedente.

Il codice sottostante esegue ciò che è stato spiegato sopra:

 //this function runs every time you are scrolling $(window).scroll(function() { var top_of_element = $("#element").offset().top; var bottom_of_element = $("#element").offset().top + $("#element").outerHeight(); var bottom_of_screen = $(window).scrollTop() + window.innerHeight; var top_of_screen = $(window).scrollTop(); if((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){ // The element is visible, do something } else { // The element is not visible, do something else } }); 

Questa risposta è un riassunto di ciò che Chris Bier e Andy stavano discutendo di seguito. Spero che aiuti chiunque stia incontrando questa domanda mentre fa ricerche come ho fatto io. Ho anche utilizzato una risposta alla seguente domanda per formulare la mia risposta: Mostra Div durante la posizione di scorrimento .

Puoi scrivere una funzione jQuery come questa per determinare se un elemento si trova nella finestra.

Includilo da qualche parte dopo che jQuery è incluso:

 $.fn.isInViewport = function() { var elementTop = $(this).offset().top; var elementBottom = elementTop + $(this).outerHeight(); var viewportTop = $(window).scrollTop(); var viewportBottom = viewportTop + $(window).height(); return elementBottom > viewportTop && elementTop < viewportBottom; }; 

Esempio di utilizzo:

 $(window).on('resize scroll', function() { if ($('#Something').isInViewport()) { // do something } else { // do something else } }); 

Si noti che questo controlla solo le posizioni in alto e in basso degli elementi, ma non controlla se un elemento si trova all'esterno della finestra in senso orizzontale.

Puoi vedere questo esempio .

 // Is this element visible onscreen? var visible = $(#element).visible( detectPartial ); 

detectPartial:

  • Vero: l’intero elemento è visibile
  • falso: parte dell’elemento è visibile

visible è una variabile booleana che indica se l’elemento è visibile o meno.

 var visible = $(".media").visible(); 

Ecco un modo per farlo senza un plugin:

Per prima cosa prendi la posizione dell’elemento. Quindi aggiungere la posizione di scorrimento e l’altezza del viewport insieme.

Se la combinazione tra la posizione di scorrimento e l’altezza del viewport è maggiore o uguale alla posizione dell’elemento, è nella vista.

 var element_position = $("#element").offset().top; var scroll_position = $(window).scrollTop(); var viewport_height = $(window).height(); if((scroll_position + viewport_height) > element_position){ // Do something because the element is in the viewport }