在垂直滚动上更改下一个元素的类

时间：2016-08-13 18:17:20

标签： jquery

我正在尝试使用div的垂直列表，滚动下一个div会使该类处于活动状态，而最后一个则不会。

以下是我的尝试：

FULLTEXT

http://codepen.io/pen/

2 个答案:

答案 0 :(得分：3)

检查此

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

答案 1 :(得分：2)

这个答案建立在pari出色的答案之上。任何提出这个答案的人也请赞成pari的答案。由于我的修改很小，请选择pari的答案作为正确的答案。

$.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');
            $(k).prev().removeClass('box-active');  //<===== NEW
            $(k).next().removeClass('box-active');  //<===== NEW
        }
    });
}
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(100% - 40px);    //<===== MODIFIED
  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>six</div></div>
        <div class="box box7"><div>seven</div></div>
        <div class="box box8"><div>eight</div></div>
        <div class="box box9"><div>nine</div></div>
        <div class="box box10"><div>ten</div></div>
        <div class="box box11"><div>eleven</div></div>
        <div class="box box12"><div>twelve</div></div>
        <div class="box box13"><div>thirteen</div></div>
        <div class="box box14"><div>fourteen</div></div>
        <div class="box box15"><div>fifteen</div></div>
        <div class="box box16"><div>sixteen</div></div>
        <div class="box box17"><div>seventeen</div></div>
        <div class="box box18"><div>eighteen</div></div>
        <div class="box box19"><div>nineteen</div></div>
        <div class="box box20"><div>twenty</div></div>
        <div class="box box21"><div>twenty-one</div></div>
        <div class="box box22"><div>twenty-two</div></div>
        <div class="box box23"><div>twenty-three</div></div>
        <div class="box box24"><div>twenty-four</div></div>
        <div class="box box25"><div>twenty-five</div></div>
        <div class="box box26"><div>twenty-six</div></div>
        <div class="box box27"><div>twenty-seven</div></div>
        <div class="box box28"><div>twenty-eight</div></div>
    </div>

相关问题
最新问题