在wordpress中包含航点

Question

So I'm trying to include waypoints.js in my wordpress page but I can't figure it out why it is not working.

I got this in my functions.php inside my theme (and I put noframework.waypoints.min.js inside the js folder):

function waypoints_init() {
    wp_enqueue_script( 'waypointsJS', get_template_directory_uri() . '/js/noframework.waypoints.min.js', array('jquery'), true);
}
add_action('wp_enqueue_scripts', 'waypoints_init');

Then I wrote:

function waypointTrigger() {
echo '<script>
    jQuery(document).ready(function() {
        var waypoint = new Waypoint({
          element: document.getElementById("triggerPointId"),
          handler: function() {
            alert("Basic waypoint triggered");
          }
        });
    })
</script>';
}
add_action('wp_footer', 'waypointTrigger');

and still when I scroll down to the point where the element with ID mentioned above is located I get nothing at all.

Where did I make a mistake?

Answer 1

I ended up adding this to functions.php

//*WAYPOINTS
function waypoints_init() {
    wp_enqueue_script( 'waypointsJS', get_template_directory_uri() . '/js/jquery.waypoints.js', array('jquery'), true);
}
add_action('wp_enqueue_scripts', 'waypoints_init');

Then I added a custom .js file where I set up all jQuery I needed for my website (including waypoints):

function yourCustomJSFunction() {
wp_enqueue_script( 'type_anything_here', get_template_directory_uri() . '/js/yourCustomJS.js', array('jquery') );
}
add_action('wp_enqueue_scripts', 'yourCustomJSFunction');

Then just remember to add every single line of your code in:

jQuery(function($){
    //Here you can use your normal jQuery syntax like for example:
     var mainScreenHeight = $('#start').height();
     $(window).on('scroll', function() {
            var st = $(this).scrollTop();
            if (st <= mainScreenHeight) {
                $('#customBox').css({'opacity' : (0 + st / mainScreenHeight) });
            };
    });
});

Hope this helps!