Title: .addClass JS/JQUERY Last modified: August 30, 2016 --- # .addClass JS/JQUERY * Resolved [Teddy_c](https://wordpress.org/support/users/teddy_c/) * (@teddy_c) * [10 years, 11 months ago](https://wordpress.org/support/topic/addclass-jsjquery/) * Hi everyone, * I have a problem that have been trying to solve for the past 3 days, and it starts to getting me crazy. I have created child theme, linked my style sheet via my function.php sheet without any trouble. * What I want to do now is simply add a class to the header of my pages (which contains my navigation menu, logo, etc.) on scroll down to add a sticky navigation and also resize my logo, etc.: [I am following this example](https://www.youtube.com/watch?v=bGDtc-ztr8o) * So, what I have done so far is: * **sticky.js** * ``` function makeSticky() { var myWindow = jquery(window), myHeader = jquery(".site-header"); myWindow.scroll(function () { if (myWindow.scrollTop() === 0) { myHeader.removeClass("sticky-nav"); } else { myHeader.addClass("sticky-nav"); } }); } ``` * **functions.php** * ``` ``` * header.php * ``` jquery( function() { makeSticky(); }); ``` * The problem is that it does not work. When I check on Firebug if a class has been added to my header, nothing happen. * I feel like I miss something, such as jquery or calling my js but I can’t figure it out. * Thanks for any help * Teddy Viewing 15 replies - 1 through 15 (of 19 total) 1 [2](https://wordpress.org/support/topic/addclass-jsjquery/page/2/?output_format=md) [→](https://wordpress.org/support/topic/addclass-jsjquery/page/2/?output_format=md) * [stephencottontail](https://wordpress.org/support/users/stephencottontail/) * (@stephencottontail) * [10 years, 11 months ago](https://wordpress.org/support/topic/addclass-jsjquery/#post-6234933) * You’ve got a few different errors here. * First, in `sticky.js` you need to call it `jQuery`, not `jquery` (capitalization matters). Second, in your `functions.php` you need to quote `jquery` when you call `wp_enqueue_script()`: * `wp_enqueue_script( 'sticky', get_template_directory_uri() . '/js/sticky.js', array( 'jquery' ), true );` * (Here, you can call it `jquery`, all lowercase. Fun, right?) * Third, in `header.php` you can’t have “naked” JavaScript; you need to wrap it in ` ``` * Thread Starter [Teddy_c](https://wordpress.org/support/users/teddy_c/) * (@teddy_c) * [10 years, 11 months ago](https://wordpress.org/support/topic/addclass-jsjquery/#post-6234958) * Thanks for the answer. So, I made the correction, however I still have nothing appearing next to my header. The class doesn’t add to the header section. * Thread Starter [Teddy_c](https://wordpress.org/support/users/teddy_c/) * (@teddy_c) * [10 years, 11 months ago](https://wordpress.org/support/topic/addclass-jsjquery/#post-6234962) * And I have this error message appearing on my consol un brackets * ‘jQuery’ was used before it was defined. var mywindow=Jquery(window) * Missing ‘use strict’ statement. var mywindow=Jquery(window) * [stephencottontail](https://wordpress.org/support/users/stephencottontail/) * (@stephencottontail) * [10 years, 11 months ago](https://wordpress.org/support/topic/addclass-jsjquery/#post-6234970) * Can you link to a page that shows the issue? Also, I missed this earlier. It isn’t necessary to have this line in your `header.php`, as `wp_enqueue_script()` calls the script for you automatically: * `` * Thread Starter [Teddy_c](https://wordpress.org/support/users/teddy_c/) * (@teddy_c) * [10 years, 11 months ago](https://wordpress.org/support/topic/addclass-jsjquery/#post-6234974) * I am actually working on a local server via wamp because my website is live right now. * [http://www.thesofachronicle.com](http://www.thesofachronicle.com) here is the unmodified version of the website (meaning that the wp_enqueue_script has not been use on the live version) * [stephencottontail](https://wordpress.org/support/users/stephencottontail/) * (@stephencottontail) * [10 years, 11 months ago](https://wordpress.org/support/topic/addclass-jsjquery/#post-6234976) * I don’t see the sticky navigation code anywhere on the site you linked. Have you emptied your caching plugin since you added the code? * Thread Starter [Teddy_c](https://wordpress.org/support/users/teddy_c/) * (@teddy_c) * [10 years, 11 months ago](https://wordpress.org/support/topic/addclass-jsjquery/#post-6234978) * This version is the live one that I have not modified yet. Unfortunately the modified version of my website is on a local server via wamp. * [stephencottontail](https://wordpress.org/support/users/stephencottontail/) * (@stephencottontail) * [10 years, 11 months ago](https://wordpress.org/support/topic/addclass-jsjquery/#post-6234982) * Can you post the code you’re using now, then? If it’s way too long, then post it to [Pastebin](http://pastebin.com/) and post the link here. * Thread Starter [Teddy_c](https://wordpress.org/support/users/teddy_c/) * (@teddy_c) * [10 years, 11 months ago](https://wordpress.org/support/topic/addclass-jsjquery/#post-6235056) * Hey Stephen, * the code is kind of long, here is the link to the different sheet: [header.php](http://pastebin.com/qEi70TQS) [style.css [sticky.js [functions.php (parent) [functions.php (child)](http://pastebin.com/PUtbEzxs) * Thank you * [stephencottontail](https://wordpress.org/support/users/stephencottontail/) * (@stephencottontail) * [10 years, 11 months ago](https://wordpress.org/support/topic/addclass-jsjquery/#post-6235062) * In `header.php`, check your capitalization on line 23. `jquery` should be `jQuery`: * ``` jQuery( function() { makeSticky(); } ); ``` * You also don’t need to explicitly call the script on line 13, as `wp_enqueue_script()` calls it for you. * And in `functions.php`, you’ve possibly got the wrong arguments for `wp_enqueue_script()`. When you call `get_template_directory_uri()` from a child theme, WordPress returns the path to the parent theme. So if `sticky.js` is located in the parent theme’s folder, you would call `wp_enqueue_script()` like this: * `wp_enqueue_script( 'sticky', get_template_directory_uri() . '/js/sticky.js', array('jquery'), null, false );` * Otherwise, you’d call it like this: * `wp_enqueue_script( 'sticky', get_stylesheet_directory_uri() . '/js/sticky.js', array('jquery'), null, false );` * Thread Starter [Teddy_c](https://wordpress.org/support/users/teddy_c/) * (@teddy_c) * [10 years, 11 months ago](https://wordpress.org/support/topic/addclass-jsjquery/#post-6235078) * I have made the changes, however it still does not work. I have just realized though that jQuery-ui is not loading on my website. jQuery is but not jQuery- ui. * Thread Starter [Teddy_c](https://wordpress.org/support/users/teddy_c/) * (@teddy_c) * [10 years, 11 months ago](https://wordpress.org/support/topic/addclass-jsjquery/#post-6235080) * When I open firebug in firefox, I cannot see my javascript loading in the console. * Thread Starter [Teddy_c](https://wordpress.org/support/users/teddy_c/) * (@teddy_c) * [10 years, 11 months ago](https://wordpress.org/support/topic/addclass-jsjquery/#post-6235086) * I have just realized that my script is not loading in the page when I look for it on google chrome, view source. * [stephencottontail](https://wordpress.org/support/users/stephencottontail/) * (@stephencottontail) * [10 years, 11 months ago](https://wordpress.org/support/topic/addclass-jsjquery/#post-6235094) * How are you calling the script from `functions.php`? Can you post the `wp_enqueue_script()` line you’re using? * Thread Starter [Teddy_c](https://wordpress.org/support/users/teddy_c/) * (@teddy_c) * [10 years, 11 months ago](https://wordpress.org/support/topic/addclass-jsjquery/#post-6235099) * function penscratch_child_script() { wp_enqueue_script( ‘sticky’, get_stylesheet_directory_uri().‘/ js/sticky.js’, true); } add_action( ‘wp_enqueue_scripts’, ‘penscratch_child_script’); * my sticky.js script is local=ted in a js folder in my child theme folder Viewing 15 replies - 1 through 15 (of 19 total) 1 [2](https://wordpress.org/support/topic/addclass-jsjquery/page/2/?output_format=md) [→](https://wordpress.org/support/topic/addclass-jsjquery/page/2/?output_format=md) The topic ‘.addClass JS/JQUERY’ is closed to new replies. ## Tags * [enqueue](https://wordpress.org/support/topic-tag/enqueue/) * [javascript](https://wordpress.org/support/topic-tag/javascript/) * [jquery](https://wordpress.org/support/topic-tag/jquery/) * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/) * 19 replies * 2 participants * Last reply from: [stephencottontail](https://wordpress.org/support/users/stephencottontail/) * Last activity: [10 years, 11 months ago](https://wordpress.org/support/topic/addclass-jsjquery/page/2/#post-6235135) * Status: resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics