how to make class deletion if user saw object

$(document).ready(function() { if($('.text-sender-unrea').is(':visible')){ $('.text-sender-unrea').removeClass('text-sender- unread'); } }); 

  .message-block { position: sticky; background-color: #eef2f4; height: 400px; overflow-y: scroll; padding-top: 10px; border-radius: 10px; } .text-sender-read { background-color: #8bda84; width: 60%; padding: 5%; border-radius: 30px; } .text-sender-unread { box-shadow: 0px 0px 14px 2px #3675d8; } .sender{ position: relative; } .sender:before { content: ''; position: absolute; top: 23px; right: 96%; border-right: 30px solid rgb(139, 218, 132); border-top: 1px solid transparent; border-bottom: 41px solid transparent; } .incoming { position: relative; } .incoming:after{ content: ''; position: absolute; top: 23px; left: 96%; border-left: 30px solid rgb(219, 218, 222); border-top: 1px solid transparent; border-bottom: 41px solid transparent; } .text-incoming { background-color:rgba(173, 164, 172, 0.31); width: 60%; padding: 5%; border-radius: 30px; float: right; } .page_square_photo { position: relative; display: inline-block; height: 82%; border-radius: 50%; border: 3px solid #b6cada; width: 70px; /* margin-left: 6px; */ background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; } .page_photos_module { padding: 5px 0px 20px; height: 110px; } .inline-message { display: table-row-group; } input.form-control.teo-two { /* line-height: 2; */ position: sticky; border-radius: 5px; border-width: 1px; border-style: solid; border-color: #36b5df; background-color: rgb(238, 242, 244); } .orange { background-color: rgba(238, 242, 244, 0.74); width: 100%; margin-top: 5px; height: 80px; border-radius: 3px; padding: 0px 0 0 12px; } .block-member { overflow-y: scroll; display: inline-grid; overflow-x: hidden; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="message-block"> <div class="message-block-inner"> <div class="inline-message"> <div class="col-md-10"> <div class="incoming"><p class="text-incoming text-sender-unread">tyhrgedwsqa uyjthgr4fewq</p></div> </div> </div> </div> </div> </div>