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

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

• javascript
• jquery
• url

• 1 Best up-to-date way to do this is to use the HTML5 History API. See this related question for more details. – rugk Commented Jun 29, 2016 at 1:29

4 Answers 4

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>

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

You are looking for the .scroll() event handler

With jquery you can use the scrollTop method to find the scroll position and then compare it to say the position of elements on the page to work out where on the page they are and update accordingly.