Thêm class trên yếu tố html khi nó được nhìn thấy trên màn hình

Question

Tôi muốn thêm lớp để các phần tử khi nó được nhìn thấy trên màn hình khi di chuyển:

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

Tôi muốn thêm lớp để 'btn-default' khi nút được nhìn thấy trên màn hình sau khi cuộn hoặc khi trang tải lại.

Answer 1

Hãy thử chọn có thể nhìn thấy như trong:

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

Answer 2

Bạn đã sử dụng jquery $(element).is(':visible') để kiểm tra xem một yếu tố có thể nhìn thấy trong một tài liệu HTML.

JSFiddle

Đây là đoạn mà nó sẽ thêm một lớp khi tài liệu sẵn sàng và khi cuộn đến phần tử.

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

Thông thường bạn có thể thêm và loại bỏ lớp bên dưới mã nhưng đầu tiên bạn thêm (bao gồm) bất kỳ jquery js phút

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

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