location.hash on scroll funktioniert nicht richtig

[Jan-Frederik Stieler]

Hallo,
ich habe ein script geschrieben welches beim scrollen mein Menü aktiv schaltet und den Hash der URl ändert.

    $(document).on('scroll', function() {
        var scrollPos                =    $(document).scrollTop();
       
        if (scrollPos > windowHeight - menuHeight) {
            $('body').addClass('stickymenu'); //Stickymenu
            $('main section').each(function(i) {
                if ($(this).position().top <= scrollPos + menuHeight) {               
                    $('nav a.active').removeClass('active');
                    $('nav a').eq(i+1).addClass('active');
                    window.location.hash = $(this).attr('id'); //Change hash on scroll
                }
            });
        } else {
            $('body').removeClass('stickymenu'); //Remove stickymenu
            $('menu a.active').removeClass('active');
            $('menu a:nth-child(2)').addClass('active');
        }
    });

Leider funktioniert das mit dem Hash nicht einwandfrei. Ab dem zweiten Section fängt die Url an verrückt zu spielen, also flackert und springt schnell zwischen unterschiedlichen Hashes hin und her.
Das scrollen funktioniert dann natürlich auch nicht mehr so richtig. Ich denke mal weil der Browser zu stark beschäftigt ist und nicht weiß wohin er springen soll.

Ich versteh leider nicht so ganz wo mein Denkfehler liegt. Vielleicht versteht das ja jemand?

Grüße

 

[Parantatatam]

Probiere es mal so: http://stackoverflow.com/a/14690177

 

[Jan-Frederik Stieler]

Hi,
danke für die Idee leider tritt da das selbe Problem auf.

    $(document).on('scroll', function() {
        var scrollPos                =    $(document).scrollTop();
       
        if (scrollPos > windowHeight - menuHeight) {
            $('body').addClass('stickymenu'); //Stickymenu
            $('main section').each(function(i) {
                if ($(this).position().top <= scrollPos + menuHeight) {
               
                var target = $(this).attr('id');               
               
                    $('nav a.active').removeClass('active');
                    $('nav a').eq(i+1).addClass('active');
                    if(history.pushState) {
                        history.pushState(null, null, target);
                    }
                    else {
                        location.hash = target;
                    } 
                }
            });
        } else {
            $('body').removeClass('stickymenu'); //Remove stickymenu
            $('menu a.active').removeClass('active');
            $('menu a:nth-child(2)').addClass('active');
        }
    });