I’m trying to implement a sticky navbar with Waypoints (http://imakewebthings.com/jquery-waypoints/shortcuts/sticky-elements/) on a WordPress site I’m building. The idea is that the navbar should be located below the large slider/header img, and then stick to top when it reaches the top of the page.

 <?php wp_enqueue_script('jquery'); ?>
 <?php wp_head(); ?>
<style>
#menu.stuck {position:fixed;top:0;width:100%;}
</style>
<script src="http://www.chuckagency.com/wordpress-new/wp-content/themes/bootstrap-        ultimate/lib/bootstrap/js/waypoints.min.js"></script>
<script src="http://www.chuckagency.com/wordpress-new/wp-content/themes/bootstrap-ultimate/lib/bootstrap/js/waypoints-sticky.min.js"></script>
<script>
jQuery(document).ready(function($) {
$('#menu').waypoint('sticky', {
  wrapper: '<div class="sticky-wrapper" />',
  stuckClass: 'stuck'
});
});
</script>

jQuery is adding the .stuck class to the navbar, but the scroll behavior isn’t working correctly - .stuck should only be added when .sticky-wrapper hits the top of the page, but it’s being added on page load.

What am I doing wrong?

Test site at http://chuckagency.com/wordpress-new/ .

Thanks so much!

Read more here: jQuery Waypoints - Sticky Navbar not working


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.

Related Wordpress search:

, , , ,

Wordpress related questions and answers: