How can I pass an id of element to url when I scroll to it?

Question

I have a set of elements on a page that have ids in them.

The client wants to be able to have a scroll that attaches the id to the end of the url each time you scroll to it.

So heres the markup:

HTML:

<section class="body-large scrolled" id="drop-in-membership">

</section>      

      <section class="body-large scrolled" id="hotdesk-membership">

</section>      

      <section class="body-large scrolled" id="resident-membership">

</section>      

      <section class="body-large scrolled" id="studios">

</section>

JS:

$(window).scroll(function() {

                var winTop = $(this).scrollTop();
                var $scrolledDivs = $('.scrolled');

                $.each($scrolledDivs, function(item) {
                    if( $(item).offset().top == winTop ) {

                    //console.log( this.attr('id') );
                    window.location.href + scrolledDivs.attr('id');
                }

                });
            });

Nothing seems to be working.

Can anyone point me in the right direction please?

Answer 1

I believe this is the kind of thing you are looking for:

http://jsfiddle.net/bfd7w/

function CheckScroll(el) {
    var top_of_object = el.offset().top;
    var bottom_of_window = $('.window').height();
    if (bottom_of_window >= top_of_object) {
        $('#result').text('ID ("'+el.attr('id')+'") is now showing');
    }    
}

$('.window').scroll(function(){
    $('section').each(function() {
        CheckScroll($(this));        
    });
});

EDIT:

For window scrolling: http://jsfiddle.net/bfd7w/3/

function CheckScroll(el) {
    var top_of_object = el.offset().top;
    var bottom_of_window = $(window).scrollTop() + $(window).height();
    if (bottom_of_window >= top_of_object) {
        $('#result').text('ID ("'+el.attr('id')+'") is now showing');
    }    
}

$(window).scroll(function(){
    $('section').each(function() {
        CheckScroll($(this));        
    });
});