pushState when Div comes in to view

Question

I currently am working on a single page app and am using jQuery waypoints to around the page. When manually scrolling though, I'd like to use pushState to change the url in the address bar when the div comes in to view. How could I go about doing that? Thanks!

Answer 1

You want to change the url depending on the page scroll? The only part of the url which can be changed is the 'hash', for example http://example.com/index.html#div5
To do this, you need to detect page scroll and then to set this hash string.

$(window).scroll(function () {
    //this shows how many pixels we have scrolled
    var scroll = window.scrollTop;

    //now we loop through the divs
    $('.div').each(function(){
        var top = $(this).offset().top,
           width = $(this).width();
        //if we are seing the current div, set the url and...
        if(scroll >= top && scroll <= top + width) {
            location.hash = $(this).attr('id');
            return false;// ... and stop looping through the divs
        }
    });
});

I suppose your html is like this:

<div class="div" id="this is the url for the first div">
</div>
<div class="div" id="this is the url for the second div">
</div>
<div class="div" id="this is the url for the third div">
</div>

Answer 2

Just listen for document scrolling

$(window).on('scroll'/*, your handler */);

and calculate div's position against view port, good solution is here:

https://stackoverflow.com/a/125106/990942

Basically, you need to

var myBlocks = $('.div-you-track') // gather all your blocks

function resolve() {
    var resolved;

    myBlocks.each(function(block) {
        if (inViewort(block)) { // for inViewport look link above
            resolved = block;
        }
    });

    if (resolved) {
        // push your state
        // you can use data-* attributes to determine link, for example
        // resolved.data('url')
    }
}

$(window).on('scroll', resolve); // listen to body

Here is HTML sample

<div class="div-you-track"></div>
<div class="div-you-track"></div>
<div class="div-you-track"></div>
...