当他可见时将类添加到div

Question

如果某个元素（<div>）的类在屏幕上可见或者在屏幕中心位置时可以添加类，并且在页面向下或向上滚动时删除此类？

Answer 1

试试这个。

＆＃13;

＆＃13;

$.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');
        }
    });
}

＆＃13;

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;}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;