When URL changes on scroll to a certain hash, add a class to a div

My URL hash changes on scroll from

• www.website.com#section–1
• www.website.com#section–2
• www.website.com#section–3

and so on. It’s a fullpage-scrolling effect.

What I want to do is to add the class .draw-shirt to the div #shirt when the URL changes on scroll to #section–2.

I tried this code:

$(document).ready(function () {

        if (window.location.href.indexOf("emotion--2") > -1) {
            $('#shirt').addClass('draw-shirt');
        }
    });
        
        

$(window).scroll(function () {
    
        function locationHashChanged() {
            if(window.location.href.indexOf("emotion--2") > -1) {
                $('#shirt').addClass('draw-shirt');
             }
        }

    });

It’s working, if the URL is www.website.com#section–2 on load but not on scroll.

The code

function isScrolledIntoView(elem) {...etc... 

is not working here because of the fullpage-scrolling-effect.

Thanks for helping.

>Solution :

I think you could use the native hashchange event of the window object.

window.addEventListener('hashchange', function() {
    if (location.hash === '#emotion-2') {
        // your code to add class
   } 
});