.addClass JS/JQUERY

  • Resolved Teddy_c

    (@teddy_c)


    9 years, 9 months ago

    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

    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

    <?php
function child_scripts() {
	wp_enqueue_script( 'sticky', get_template_directory_uri() . '/js/sticky.js', array(jquery), true );
}

add_action( 'wp_enqueue_scripts', 'child_scripts' );
?>

    header.php

    <head>
<script type="text/javascript" src="/js/sticky.js"></script>
</head>

<body>
    jquery( function() {
        makeSticky();
    });
</body>

    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 4 replies - 16 through 19 (of 19 total)
  • Thread Starter Teddy_c

    (@teddy_c)

    Does it have anything to do with the fact that I am on a local server?

    Thread Starter Teddy_c

    (@teddy_c)

    I finally got my script to load in the page, however it is not working. I think it is a script problem now.

    Thread Starter Teddy_c

    (@teddy_c)

    I got it. I just forgot to actually call my function in my js file.

    Thank you very much for the help Stephen, I do appreciate and I could have had it worked without your help.

    Edit: I just saw your most recent post. I’m glad you got everything worked out.

    You need to review the arguments for wp_enqueue_script(), because now you’ve removed the code that tells WordPress that sticky.js depends on jQuery being loaded. Please copy and paste the code from this page exactly as I’ve posted it.

    function penscratch_child_script() {
  wp_enqueue_script( 'sticky', get_template_directory_uri() . '/js/sticky.js', array( 'jquery' ), null, false );
}
add_action( 'wp_enqueue_scripts', 'penscratch_child_script' );
Viewing 4 replies - 16 through 19 (of 19 total)
  • The topic ‘.addClass JS/JQUERY’ is closed to new replies.