Update scroll is flipping out on scroll

Question

I was wondering how I can update the Hash in the URL when scrolling.

I use the following code to update the current state in my single page design.

function setActiveListElements(){

    // Get the offset of the window from the top of page
    var windowPos = $(window).scrollTop();

    $('#primary-navwrapper').find('li a[href^="#"]').each(function () { 
        var anchorId = $(this);
        var target = $(anchorId.attr("href"));
        //console.log(target);

        var offsetTop = target.position().top - offset;
        //var offsetBottom = offsetTop + target.height();
        //var top = sidebar.offset().top;

        if (target.length > 0) {
            //console.log(target.position().top + target.height());

            //if(windowPos >= offsetTop && windowPos <= offsetBottom) {
            if (target.position().top - offset <= windowPos && target.position().top + target.height() + offset > windowPos) {
                $('#primary-navwrapper li a').removeClass("current");
                anchorId.addClass("current");
            }

        }

    });

}

This function is called on scroll. Now I came with the following solution:

function setActiveListElements(){

        // Get the offset of the window from the top of page
        var windowPos = $(window).scrollTop();

        $('#primary-navwrapper').find('li a[href^="#"]').each(function () { 
            var anchorId = $(this);
            var target = $(anchorId.attr("href"));
            //console.log(target);

            var offsetTop = target.position().top - offset;
            //var offsetBottom = offsetTop + target.height();
            //var top = sidebar.offset().top;

            if (target.length > 0) {
                //console.log(target.position().top + target.height());

                //if(windowPos >= offsetTop && windowPos <= offsetBottom) {
                if (target.position().top - offset <= windowPos && target.position().top + target.height() + offset > windowPos) {
                    $('#primary-navwrapper li a').removeClass("current");
                    anchorId.addClass("current");
                    window.location.hash = $(this).attr('href');
                }

            }

        });

    }

But when I scroll you will see the hash totally flip out and freeze. What can this be?

`window.location.hash = 'myvalue';`? – George Jul 06 '15 at 17:11 — George, Jul 06 '15 at 17:11

score 0 · Answer 1 · answered Jul 06 '15 at 17:15

0

Use the History API :

history.pushState(null, null, '#myhash');

To handle those who do not support this :

if (history.pushState) {
    history.pushState(null, null, '#myhash');
} else {
    location.hash = '#myhash';
}

answered Jul 06 '15 at 17:15

JBA

2,889
1
21
38

How is it possible to replace `#myhash` for the id of that section where you scroll on? – Caspert Jul 06 '15 at 17:18
Sure, this is another question then :-) but once you scroll, you need to make a method that detects where you are, and from there you will update your hash... – JBA Jul 06 '15 at 17:19
Check [this SO answer](http://stackoverflow.com/questions/5036850/how-to-detect-page-scroll-to-a-certain-point-in-jquery) about detecting where you are in scroll with jQuery. – JBA Jul 06 '15 at 17:21
Yeah, but my code detects it already. It will set the current state of my menu to the right position of the viewport... So I thought it is only add some little bit of code to my code... – Caspert Jul 06 '15 at 17:29

Update scroll is flipping out on scroll

1 Answers1