Jquery not appearing across site when added to Customise > Global Javascript

[Alex_H1]

Hello,

I am adding javascript to the customizer (developing on my local server using MAMP), and although it works successfully on the page I have opened the customizer for, it does not work across the site. The code I am using is:

var yourNavigation = $("#stickymenu");
stickyDiv = “fixedmenu”;
yourHeader = $(’#hero’).height();

$(window).scroll(function() {
if( $(this).scrollTop() > yourHeader ) {
yourNavigation.addClass(stickyDiv);
} else {
yourNavigation.removeClass(stickyDiv);
}
});

Am I entering this in the wrong place? Currently I am putting it in Customise > Custom > Global Javascript.

Regards,

Alex

[christian]

Hey Alex,

The Global JS will be loaded throughout your site as it is outputted in the footer. Please check the front-end source code of the pages and see if the code exists. If it does exist, the issue is with your code. Glancing at your code, it looks like it would not work because you did not map $ to jQuery. For more details, please see https://digwp.com/2011/09/using-instead-of-jquery-in-wordpress/.

Thanks.

[Alex_H1]

Hello,

I am afraid I am new to Jquery and may need a little extra assistance. The code is working fine with customizer open, it’s when I hit ‘publish’ and close customizer it no longer works.

The code is appearing in the footer, however:

<script id="x-customizer-js">$(document).scroll(function () {
var y = $(document).scrollTop(),
    header = $("#stickymenu");

if (y >= 600) {
    header.addClass('fixedmenu');
} else {
    header.removeClass('fixedmenu');
}

});

Thanks for your help!
Alex

[mldarshana]

Hi There,

Instead of $ sign, use jQuery keyword in your code. Also don’t use <script> </script> tags when adding the code into Theme Options > Global CSS.

Let us know how it goes.
Thanks!

[Alex_H1]

Got it - thanks!

[Joao]

You are welcome!