Logo is not resizing when I scroll unless I add jquery llink/version to header-CodePudding

I added a script to have the logo shrink when the page is scrolled. It will only work when I add the jquery.min.js version script link to the header. I thought jquery is added to Wordpress and I know doing this can break other things.

Should I add this and if so what is the correct way to add it to Wordpress?

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"         </script> 

    <script> $(document).on('scroll', function() {   $('.logo img').toggleClass('small', $(document).scrollTop() >= 10); });
    </script>

This is the development site - https://essey.tfm-dev.com/#!search?width=105&height=70&season_id=all&location_id=28242&search_by=size

CodePudding user response：

You need a better selectorthat actually selects your desired element

so instead of .logo img you could use img.logo for your example (img tag that has class "logo")

when I enter this code into your dev site console it works as expected

jQuery(document).on('scroll', function() {   
   jQuery('img.logo').toggleClass('small', jQuery(document).scrollTop() >= 10); 
});

you might switch back jQuery to $, i just made it to try out in console

and yes you dont need/ should not include jquery twice, please check the network tab and´make sure it´s loaded once, then read here how to add your js to your page