Waypoints.js

Beaver Builder
1

Hi there

I would like to implement some functionality (making an element stick to the top of the page) using waypoints.js but there is a conflict as soon as I upload my js file in that it stops the backend of the builder functioning properly. Is there a way around this?

Thanks

James

2

Hey James,

Just letting you know I’m checking in with the team on this one.

Thanks!

KC

3

Hey James,

Would it be possible to post your JS code for us to take a look at?

Thanks,
Justin

4

Hey Justin

Code is as follows:

jQuery(document).ready(function($) {

$('.nav-primary').waypoint('sticky');

});

I’m using the Genesis framework and have added the following to my functions file:

add_action( ‘wp_enqueue_scripts’, ‘stick_elements’ );
function stick_elements() {

wp_enqueue_script( 'waypoints', get_stylesheet_directory_uri() . '/js/waypoints.min.js', array( 'jquery' ), '1.0.0' );
wp_enqueue_script( 'waypoints-sticky', get_stylesheet_directory_uri() .'/js/waypoints-sticky.min.js' , array( 'waypoints' ), '1.0.0' );
wp_enqueue_script( 'waypoints-sticky-init', get_stylesheet_directory_uri() .'/js/waypoints-sticky-init.js' , array( 'waypoints-sticky' ), '1.0.0' );

}

Thanks

James

5

Hi James,

The issue might be that Beaver Builder loads in waypoints as well. It loads in waypoints if you setup a row/column/module animation. It also loads it in when the builder interface is active.

Can you try changing this…

wp_enqueue_script( ‘waypoints’, get_stylesheet_directory_uri() . ‘/js/waypoints.min.js’, array( ‘jquery’ ), ‘1.0.0’ );

To this…

wp_enqueue_script('jquery-waypoints');

Let me know how that goes.

Justin