jQuery is not Working on my WordPress Site

Question

I have tried everything to get my jQuery codes to work and none of it seems to work. I have checked to make sure the JavaScript script is enqueuing and loading in the browser source code and it's. I also looked at the JavaScript console for errors and no errors were found. Site is located at " http://twps.psadeaf.org/v3/ ". The script I am loading is "init.js".

I am enqueuing the script with code bellow:

// Adding init file in the footer
wp_enqueue_script( 'init-js', get_template_directory_uri() . '/assets/js/init.js', array( 'jquery' ), '', true );

Then the jQuery code that does not work is:

jQuery(window).scroll(function() {
   if (scroll >= 50) {
     jQuery('.psad-nav-button').show()
     jQuery(".psad-nav").hide()
   }
   if (scroll < 50) {
     jQuery(".psad-nav").show()
     jQuery('.psad-nav-button').hide()
   } 
});

Bellow is the code that should be effected by it:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div data-sticky-container> <div data-sticky data-options="marginTop:0;" data-sticky-on="small" style="width:100%"> <div class="title-bar psad-nav" data-responsive-toggle="top-bar-menu" data-hide-for="<?php echo $breakpoint ?>"> <button class="menu-icon" type="button" data-toggle></button> <div class="title-bar-title"> <?php _e( 'Menu', 'jointswp' ); ?> </div> </div> <div class="top-bar psad-nav" id="top-bar-menu"> <div class="top-bar-left show-for-<?php echo $breakpoint ?>"> <?php do_action( 'psad_site_logo', '200px' ); ?> </div> <div class="top-bar-right"> <?php joints_top_nav(); ?> </div> </div> <button class="psad-nav-button expanded button" type="button"> ^ Navigation ^ </button> </div> </div> 

I am using foundation 6 by Zurb for Sites in my theme. The original theme is JOINTSWP. I am using the the sticky plugin to make the navigation/header to stick to the top of the page as the user scrolls down the page. I am using the ".scroll() api" to modify it with the "psad-nav" and "psad-nav-button" class. Using the ".show()" and ".hide()" api to show and hide the classes after scrolling down the page.

I have tried using other api's and nothing works on my site.

Answer 1

Your conditions are comparing the value of scroll but scroll is a function in the global namespace. Checking if a function is more than or less than an integer makes no sense and returns false. Your if statements are always false and never happen.

Answer 2

You haven't defined the variable scroll used in the if conditions. The value of scroll should be document.body.scrollTop to get the current scroll position in the document.

jQuery(window).scroll(function() {
   var scroll = document.body.scrollTop;
   if (scroll >= 50) {
     jQuery('.psad-nav-button').show()
     jQuery(".psad-nav").hide()
   }
   if (scroll < 50) {
     jQuery(".psad-nav").show()
     jQuery('.psad-nav-button').hide()
   } 
});

Answer 3

Thank you everyone for their responses, I feel real smart! ;) haha You have to forgive me it's been awhile since I have been working with JavaScript. I am also surprised it didn't throw any errors in the JavaScript console. I was taking the code from a tutorial on tuts+. I didn't catch that they left out the declaration of the variable "scroll". I fixed that and it works great but then also realized I am naming a variable the same name as a global function in jQuery. I wounder if that is why it didn't throw an error for an undefined variable in the JavaScript console. I ended up changing the variable name also to avoid conflict.

Bellow is the code I ended up going with:

jQuery(window).scroll(function() {
    var psad_scroll = jQuery(this).scrollTop();
    var psad_nav = jQuery( ".psad-nav" );
    var psad_nav_button = jQuery( ".psad-nav-button" );

    function psad_show_nav() {
        if (Foundation.MediaQuery.atLeast( "medium" )) {
            psad_nav.show();
            psad_nav_button.addClass( "hide" ) ;
        }
    }

    function psad_hide_nav() {
        if (Foundation.MediaQuery.atLeast( "medium" )) {
            psad_nav_button.removeClass( "hide" );
            psad_nav.hide();
        }
    }

    if (psad_scroll >= 30) {
        psad_hide_nav();
        psad_nav_button.on({
            click: psad_show_nav,
            mouseenter: psad_show_nav
        });

    }
    if (psad_scroll < 30) {
        psad_show_nav();
    }
});

This now works flawlessly for me, thank you all that helped me out. Would this be the best way to achieve what I was looking for? If not, how would you accomplish this?