Dots change on scroll

Question

I have this script: http://jsfiddle.net/8cj7C/

HTML:

<div id="scroll">
<div id="1" class="scroll_item">&nbsp;</div>
<div id="2" class="scroll_item">&nbsp;</div>
<div id="3" class="scroll_item">&nbsp;</div>
<div id="4" class="scroll_item">&nbsp;</div>
</div>
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
<div id="fourth"></div>

What I need to do is when I scroll for example to the second div using the scrollbar (not the scroll dots), the second dot will change to class scroll_item_active. I need help to do this!

I've been trying to do something with scrollTop and set 800, 1600, etc, but it's not working. Any good idea?

Answer 1

I'm guessing you're looking for something more like this :

HTML

<div id="scroll">
    <div data-page="first"  class="scroll_item">&nbsp;</div>
    <div data-page="second" class="scroll_item">&nbsp;</div>
    <div data-page="third"  class="scroll_item">&nbsp;</div>
    <div data-page="fourth" class="scroll_item">&nbsp;</div>
</div>

<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
<div id="fourth"></div>

JS

$('.scroll_item').on('click', function() {
    var elem   = $('#' + $(this).data('page')),
        scroll = elem.offset().top;

    $('body, html').animate({scrollTop : scroll}, 1000);

    $(this).addClass('scroll_item_active')
           .siblings('.scroll_item_active')
           .removeClass('scroll_item_active');
});

$(window).on('scroll', function(e) {
    var elems    = $('#first, #second, #third, #fourth'),
        scrolled = $(this).scrollTop(),
        dataPage = elems.filter(function() {
            return $(this).offset().top + ($(this).height() / 2) >= scrolled;
        }).first();

    $('.scroll_item[data-page="'+dataPage.prop('id')+'"]')
              .addClass('scroll_item_active')
              .siblings('.scroll_item_active')
              .removeClass('scroll_item_active');
}).trigger('scroll');

FIDDLE