JonasAllen.Codes JonasAllen.Codes - 1 month ago 11
Javascript Question

jQuery is not Working on my WordPress Site

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

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()
   } 
});
Comments