divに表示するときにdivを追加する

Question

これらの要素が画面上に表示されている場合や、画面の中央に表示されている場合や、ページがスクロールダウンしたときにこのクラスを削除すると、クラスにいくつかの要素（<div>）

Answer 1

お試しください。

$.fn.visible = function(partial){ 
 
     
 
     var $t    = $(this), 
 
      $w    = $(window), 
 
      viewTop   = $w.scrollTop(), 
 
      viewBottom  = viewTop + $w.height(), 
 
      _top   = $t.offset().top, 
 
      _bottom   = _top + $t.height(), 
 
      compareTop  = partial === true ? _bottom : _top, 
 
      compareBottom = partial === true ? _top : _bottom; 
 
     
 
     return ((compareBottom <= viewBottom) && (compareTop >= viewTop)); 
 
    } 
 
    
 
$(document).ready(function(e){ 
 
     checkVisible(); 
 
    }); 
 

 
$(window).scroll(function(e){ 
 
     checkVisible();  
 
    }); 
 

 

 
function checkVisible() 
 
{ 
 
    $('.box').each(function(i,k){ 
 
     if($(this).visible()){ 
 
      $(k).addClass('box-active'); 
 
     } 
 
     else 
 
     { 
 
      $(k).removeClass('box-active'); 
 
     } 
 
    }); 
 
}

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
.grid2x2 { 
 
    min-height: 100%; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    flex-direction: row; 
 
} 
 
.grid2x2 > div { 
 
    display: flex; 
 
    flex-basis: calc(50% - 40px); 
 
    justify-content: center; 
 
    flex-direction: column; 
 
    min-height: 100px; 
 
} 
 
.grid2x2 > div > div { 
 
    color:white; 
 
    display: flex; 
 
    justify-content: center; 
 
    flex-direction: row; 
 
} 
 

 
.box { margin: 20px; background-color: black; } 
 
.box-active{background-color: green;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div class="grid2x2"> 
 
     <div class="box box1"><div>one</div></div> 
 
     <div class="box box2"><div>two</div></div> 
 
     <div class="box box3"><div>three</div></div> 
 
     <div class="box box4"><div>four</div></div> 
 
     <div class="box box5"><div>five</div></div> 
 
     <div class="box box6"><div>two</div></div> 
 
     <div class="box box7"><div>three</div></div> 
 
     <div class="box box8"><div>four</div></div> 
 
     <div class="box box9"><div>one</div></div> 
 
     <div class="box box10"><div>two</div></div> 
 
     <div class="box box11"><div>three</div></div> 
 
     <div class="box box12"><div>four</div></div> 
 
     <div class="box box13"><div>one</div></div> 
 
     <div class="box box14"><div>two</div></div> 
 
     <div class="box box15"><div>three</div></div> 
 
     <div class="box box16"><div>four</div></div> 
 
     <div class="box box17"><div>one</div></div> 
 
     <div class="box box18"><div>two</div></div> 
 
     <div class="box box19"><div>three</div></div> 
 
     <div class="box box20"><div>four</div></div> 
 
     <div class="box box21"><div>one</div></div> 
 
     <div class="box box22"><div>two</div></div> 
 
     <div class="box box23"><div>three</div></div> 
 
     <div class="box box24"><div>four</div></div> 
 
     <div class="box box25"><div>one</div></div> 
 
     <div class="box box26"><div>two</div></div> 
 
     <div class="box box27"><div>three</div></div> 
 
     <div class="box box28"><div>four</div></div> 
 
    </div>