jeudi 26 mars 2020

Avoid scrolling event listener when clicked on hashed link

    $(window).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');
        }
    });
});

I am changing the window location with each section visible on screen while scrolling by detecting the current section ID.

Now I also have a side navigation where each such hashed link can also be clicked to reach that section with that particular id.

PROBLEM : But what's happening is when I click on any link, this scroll event listener comes into play and before moving from current section, it detects current section id and put it in the URL, hence the sections doesn't move.

I need the scrolling ID changing behavior and also when we click on any section link, like #section1, it should go there and the url change accordingly.




Aucun commentaire:

Enregistrer un commentaire