CODEWITHSUNDEEP
jquerycss
James Daley
James Daley

Reputation: 289

Change div colour depending on scroll position

I have 4 occurrences of my div class 'line_status' aligning vertically down my page like so:

line_status

line_status

line_status

line_status

these divs are fixed so they are always in view to the user when they scroll down the page.

What I am trying to achieve is a kind of change colour effect to show where the user is upto with a form, depending on where they have scrolled to on that page.

So when the page loads it always loads at the top of the page which has some pre-filled info, so the first 'line_status' div is always filled green, the rest are grey/greyed out.

So now if the user navigates down my form by scrolling 300 px then the second occurrence of line status will change from grey to green. (but not the 3rd or 4th, at least not at this stage).

Then if they scroll down another 300 px then the 3rd div changes from grey to green and so on for the 4th.

I am struggling to do this with jquery at the moment as it changes the colour of all my divs at once rather than one by one which is my desired effect. Any ideas how I could achieve this? Also can someone please show me how i can change this from document scroll to a div object scroll function? Thanks in advance

code:

<script>
    $(document).scroll(function () { // remove "$"
        var y = $(this).scrollTop();        
        if (y > 100) {
            $(".line_status").css("background-color","green");
        }
    });
</script>

Upvotes: 3

Views: 7800

Answers (4)

Guilherme Kich
Guilherme Kich

Reputation: 341

based Everton's answer, I have created a more generic solution. It counts the numbers of elements that are from the class "remove" and uses it divide the scrollToTop:

var index = 0;
$(window).on('scroll', function() {
            if($(window).width() < 768){ // to work online on mobile
                               var toTop = $(this).scrollTop();
                               var conta = $('.remove').length; // counts how many objects
                               console.log(toTop);// to debug , log in console 
                              index = Math.floor((toTop - ($('#[PUT THE ID OF THE PARENT OF THE REMOVEs]').position().top ))/($('#[PUT THE ID OF THE PARENT OF THE REMOVEs]').height()/conta));  // here it divide the scrollTop minus a bias to begin of here the elements start to appear on the screen by the number of elements, so you get that only one element changes the colour each time 
                               index = Math.min(Math.max(parseInt(index), 0), conta-1); // limit the index so you don't access elements which don't exist
                               
                               $('.view-btn').css('background-color', 'gray');
                               $('.view-btn').eq(index).css('background-color', 'green'); // changes the color of the element
                      } 

                  });

Upvotes: 0

Anthony Carbon
Anthony Carbon

Reputation: 618

Try see my demo URL below brother. I hope this can help you. This is a simple scroll jquery code.

HTML

 <div id='status-1' class="remove"> 
  <p>I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot. 
    I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot. </p> 
</div>
<div id='status-2' class="remove">
  <p>I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot. 
    I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot. </p> 
</div>
<div id='status-3' class="remove">
  <p>I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot. 
    I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot. </p> 
</div>
<div id='status-4' class="remove">
  <p>I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot. 
    I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot. </p> 
</div>
<div id='status-5' class="remove">
  <p>I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot. 
    I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot.I am a teapot. </p>  
</div>

JS

$(window).scroll(function(){;
    w = Math.floor( $(window).scrollTop() );  
   $('.remove').css( 'background-color', '' ); 
    if(w<=$('#status-1').offset().top){
         $('#status-1').css( 'background-color', 'red' );   
    }else if(w<=$('#status-2').offset().top){
         $('#status-2').css( 'background-color', 'green' );   
    }else if(w<=$('#status-3').offset().top){
         $('#status-3').css( 'background-color', 'pink' );   
    }else if(w<=$('#status-4').offset().top){
         $('#status-4').css( 'background-color', 'yellow' );   
    }else{
         $('#status-5').css( 'background-color', 'blue' );   
    }

});

Demo

Upvotes: 6

Everton Lenger
Everton Lenger

Reputation: 1446

You can give an id to each section and change the color using that id.

If you don't want to give ids, you can change it using the index, as you already know what div should change.

In this way, the code would be like this:

$(window).on('scroll', function() {
    var toTop = $(this).scrollTop();
    var index = (toTop < 300 ? 0 : (toTop < 600 ? 1 : (toTop < 900 ? 2 : 3)));

    $('.line_status').css('background-color', 'gray');
    $('.line_status').eq(index).css('background-color', 'green');
});

JSFiddle: http://jsfiddle.net/trfaf6kw/

Give it a try and let me know if it helps!

Upvotes: 2

James Daley
James Daley

Reputation: 289

I managed to answer this by using the following

<script>
$( ".form_frame" ).scroll(function() {
    var y = $( ".form_frame" ).scrollTop();        
    if (y > 650) {
        $("#line1").css("background-color","#777");
    }else{
    $("#line1").css("background-color","#222222");    
    }
});
</script>

Upvotes: 0

Related Questions