Why won't wordpress load my jQuery script?

Question

My wordpress site won't load the script into my page. I put the following function in functions.php:

function nav_script () {

    wp_enqueue_script( 'script', get_stylesheet_directory_uri() .'/js/script.js', array('jQuery'), '1.0.0', true);

}

add_action('wp_enqueue_scripts', 'nav_script');

and the script containted in the scripts.js is as follows:

$(document).ready(function() {
    var stickyNavTop = $('.blog-nav').offset().top;
                             
        var stickyNav = function(){
        var scrollTop = $(window).scrollTop();
                        
                    if (scrollTop > stickyNavTop) { 
                        $('.blog-nav').addClass('sticky');
                    } 
                    else {
                        $('.blog-nav').removeClass('sticky'); 
                    }
                };
                                 
            stickyNav();
                                 
        $(window).scroll(function() {
            stickyNav();
    });
});

When I view the source code of the page I don't see the script, so it didn't get loaded for some reason... I have the wp_head in the head and the wp_footer before the body ending tag, so I have zero clue of what can be happening, anyone out there can help? The function works in a normal html as I tried in JSFiddle...

Editing... Guys I achieved something by adding the script "manually" to the function, like this:

    function nav_script () {
        ?>
        <script>
            
            $(document).ready(function() {
                                var stickyNavTop = $('.blog-nav').offset().top;
                                 
                                    var stickyNav = function(){
                                    var scrollTop = $(window).scrollTop();
                            
                                    if (scrollTop > stickyNavTop) { 
                                            $('.blog-nav').addClass('sticky');
                                    } else {
                                            $('.blog-nav').removeClass('sticky'); 
                                    }
                                    };
                                     
                                    stickyNav();
                                     
                                    $(window).scroll(function() {
                                        stickyNav();
                                });
                            });
            
        </script>
        <?php
    }

add_action('wp_head', 'nav_script');

But I've noticed two things: ONE: it won't work if I don't insert the <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> CDN in the head; TWO: It will only work if I reload the website, which is suggesting me some plugin conflict...

View the source? Or inspect the DOM? Two very different things! — Niet the Dark Absol
I did right click and view the page source, as you can see here: jsfiddle.net/7undbb8L @NiettheDarkAbsol — Giorgio Vitanza
"Page source" is as received from the server, before any JavaScript is run at all. — Niet the Dark Absol
But if the script was present in the page it should be inside the page source also, right in the head no? — Giorgio Vitanza

Giorgio Vitanza Giorgio Vitanza · Accepted Answer · 2017-07-10T19:01:56

I've fixed my problem. For the first problem, which was that the .js file wasn't loaded in the page as wasn't present in the source, I used a code similar to the one i used before, just simpler, removing the array and the values related to the version and the footer, just like this: function

blognav_script () {
    wp_enqueue_script('blognav', get_stylesheet_directory_uri() . '/js/script.js');
}

add_action('wp_enqueue_scripts', 'blognav_script');

... I can't precisely say why but if you compare my source code with the one I posted on the comments you'll notice the presence of the '/js/script.js'. - page source: https://jsfiddle.net/qx5fbxa7/ -.

Second problem: the script wouldn't load unless I refresh the page (as edited)... I solved with conditional logic setting the condition of having the class:

// function to run on page load and window resize
    function stickyUtility() {

        // only update navOffset if it is not currently using fixed position
        if (!jQuery(".blog-nav").hasClass("fixed")) {
            navOffset = jQuery(".blog-nav").offset().top;
        }

// run on page load
    stickyUtility();

I actually changed the whole script, but as to point out how to solve this problem, this are the lines that will fix it!

Why won't wordpress load my jQuery script?

Editing... Guys I achieved something by adding the script "manually" to the function, like this:

2 Answers