Aggiungi classe elemento html quando diventa visibile sullo schermo

Question

voglio aggiungere classe all'elemento quando diventa visibile sullo schermo durante lo scorrimento:

<button class='btn btn-default' > 
    Hello 
</button> 

voglio aggiungere classe per 'btn-default' quando il pulsante diventa visibile sullo schermo dopo lo scorrimento o quando la pagina si ricarica.

Answer 1

Prova di selezione visibile come in:

$(window).on('scroll', function(){ 
     if ($(".btn").is(':visible')){ 
      $(".btn").addClass("btn-default"); 
     } 
    }); 

Answer 2

Hai per usare jQuery $(element).is(':visible') per verificare se un elemento è visibile in un documento HTML.

JSFiddle

Questo è il frammento di cui si aggiungerà una classe quando documento pronto e quando scorrere all'elemento.

$(function() { 
 
    if ($('#testElement').is(':visible')) { 
 
    $('#testElement').addClass('red'); 
 
    } 
 
}); 
 
$(window).on('scroll', function() { 
 
    var $elem = $('#testElement1'); 
 
    var $window = $(window); 
 

 
    var docViewTop = $window.scrollTop(); 
 
    var docViewBottom = docViewTop + $window.height(); 
 
    var elemTop = $elem.offset().top; 
 
    var elemBottom = elemTop + $elem.height(); 
 
    if (elemBottom < docViewBottom) { 
 
    alert('hi') 
 
    $('#testElement1').addClass('red'); 
 
    } 
 
});

.red { 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="testElement" class="btn btn-default"> 
 
    Hello 
 
</button> 
 
<div style="height:400px">Some content</div> 
 
<button id="testElement1" class="btn btn-default"> 
 
    Hi 
 
</button>

Answer 3

Normalmente è possibile aggiungere e rimuovere classe inferiore codice, ma prima si aggiunge (includere) qualsiasi min jquery js

Add class: $('.Yourclassname').addClass('addclassname'); 

Remove Class: $('.Yourclassname').removeClass('removeclassname');