jQuery change hash (fragment identifier) while scrolling down page

Question

I'm building a one pager website. Eg. every page (5 in total) is on one big page with the main menu fixed at the top. When you click on a menu link it slides you down to that pages anchor tag and the clicked menu item get a "active" CSS class.

What I'd like to do now is allow the user to scroll themself but still have the menu "active" item and URL hash change as they do.

So my question basically is how do I know when the user has scrolled down to a different page so I can update the menu and URL hash (fragment identifier).

Thanks

Answer 1

its possible but there are a requirement to your page (for my solution to work):

your page have to be separated in divs(or sections whatever) with unique ids (i hope you dont use anchor <a>'s)

than you can use code like this:

$(document).bind('scroll',function(e){
    $('section').each(function(){
        if (
           $(this).offset().top < window.pageYOffset + 10
//begins before top
        && $(this).offset().top + $(this).height() > window.pageYOffset + 10
//but ends in visible area
//+ 10 allows you to change hash before it hits the top border
        ) {
            window.location.hash = $(this).attr('id');
        }
    });
});

with html like this

<section id="home">
  Home
</section>
<section id="works">
  Works
</section>
<section id="about">
  About
</section>

Answer 2

I have same issue of this for fix height section content which will change Hash according to the scroll.Somehow this code doesn't work on other browser apart of Chrome. And also manipulate DOM in the scroll then it has to take very long for that event to get process refer http://www.smashingmagazine.com/2013/06/10/pinterest-paint-performance-case-study/ Here are sample code of How I solve this

 (function () {
    // Find all  top,bottom and Hash of each sections,
    // Do this only if the section height remain the same always
    // Move this into the step() if your section height does change.
    // e.g. browser resize
    //
    var section = $.map($("section"), function (e) {
        var $e = $(e);
        var pos = $e.position();
        return {
            top: pos.top,
            bottom: pos.top + $e.height(),
            hash: $e.attr('id')
        };
    });

    //Checking scroll 
    var top = null;
    var changed = false;
    var currentHash = null;

    $(window).scroll(function () {
        var newTop = $(document).scrollTop();

        changed = newTop != top;
        if (changed) {
            top = newTop;
        }

    });

    // You wouldn't want to keep checking the scroll state as
    // it affects the browser performance when it's accessing
    // DOM and reduce your FPS (Frame per Seconds) for scrolling
    // 
    function step() {
        if (!changed) {
            // Top did not change
            return setTimeout(step, 200);
        }
        var count = section.length;
        var p;

        while (p = section[--count]) {
            if (p.top >= top || p.bottom <= top) {
                continue;
            }
            if (currentHash == p.hash) {
                break;
            }
            var scrollTop = $(document).scrollTop();
            window.location.hash = currentHash = p.hash;
            // prevent browser to scroll
            $(document).scrollTop(scrollTop);
        }
        setTimeout(step, 200);
    }
    setTimeout(step, 200);
})(); 

Demo

Answer 3

You are looking for the .scroll() event handler