Change class on next element on vertical scroll

Question

I'm trying to have a vertical list of divs and that on scroll the next div gets the class active and the last rest does not.

Following is my try:

$(document).ready(function(){
  $('#list').scroll(function() {
    $('div').removeClass("active");
    $(this).addClass("active");
  });
});

http://codepen.io/pen/

Can you please also add your HTML? What exactly means `on scroll the next div`? one scroll is 1px or one scroll is one div past the viewport? — caramba, Aug 13 '16 at 18:33
@caramba i added it all in to this codepen http://codepen.io/salman15/pen/ZOwKBq — Salman, Aug 13 '16 at 18:34

score 3 · Accepted Answer · answered Aug 13 '16 at 19:49

Check This

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

I do have a question wat does the "e" in the $(document).ready(function(e) stand for? — Salman, Aug 13 '16 at 20:34
That is an event reference.Check this link : http://stackoverflow.com/questions/10323392/in-javascript-jquery-what-does-e-mean — Parithiban, Aug 13 '16 at 20:39
I'm sorry, but what i meant was that it would pass the active class to the div if you scroll down and to the div up when you scroll up. I want to show multiple divs but only want one to be the active one and that one to pass it on. — Salman, Aug 13 '16 at 21:19
i want it to be centerd, what i am to create are about 4 divs where i want to have the top one as active and then when i scroll down i want to pass the class on to the next one — Salman, Aug 14 '16 at 20:25
Can someone give me just a really brief rundown of the different steps that are happening in this code? thank you! — felixo, Mar 27 '19 at 22:07

score 2 · Answer 2 · edited Jan 30 '21 at 19:37

This answer builds on Parithiban's excellent answer.

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

i have one final question and that is : if you increase the screen it keeps the div on the bottom as active. is there a way to center it or let it start on top? — Salman, Aug 14 '16 at 17:13
I don't fully understand what you want to happen. *What do you mean by center it or let it start on top - center what? Start what on top?* — cssyphus, Aug 14 '16 at 17:38
@gibberish what i mean is that the active is alway the one on the bottom, you can see this in full screen but i would like it to start from the top. and when scrolling the active div als go does on scroll, because ultimatly i only want to have 3 or 4 divs — Salman, Aug 15 '16 at 09:17

Change class on next element on vertical scroll

2 Answers2