javascript. change hash depending on scroll position

Question

Have been looking around for a solution/plugin that handles. navigation, menu highlighting and hash change (both on scroll and menu click) but can't really find one. I have this markup of sections for a one page site and i want to implement the bow mentioned in a nice way.

so basically - change hash on scroll and menu click (menu also needs highlighting). Both on scroll and when clicked.

EDIT: exactly like this but i need the hash to change on scroll as well. http://callmenick.com/2013/04/22/single-page-site-with-smooth-scrolling-highlighted-link-and-fixed-navigation/

html

            <nav id="main-nav">
            <ul>
                <li>
                    <a href="#">product</a>
                </li>
                <li>
                    <a href="#">process</a>
                </li>
                <li>
                    <a href="#">testimonials</a>
                </li>
                <li>
                    <a href="#">contact</a>
                </li>
            </ul>
        </nav>

        <section class="main-section" id="product">
        </section>
        <section class="main-section" id="process">
        </section>
        <section class="main-section" id="testimonials">
        </section>
        <section class="main-section" id="contact">
        </section>

Answer 1

You can update your URI by calling history.pushState('/myPage#MyNewURI')

That won't reload the page, just change the URI.