2

I am loading "jquery.waypoints.min.js" (seems to load correctly when i look with network analysis tool), but nothing happens with this simple script:

$(document).ready(function() {
    $('#footer').waypoint(function() {
       $('body').addClass("foo");
    });
});

I am trying for hours now ...

Btw. i am loading all my scripts per functions-php in wordpress:

function add_js_scripts() {
    wp_deregister_script('jquery');
    wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js", false, null);
    wp_enqueue_script('jquery');
    wp_enqueue_script('waypoints', get_stylesheet_directory_uri() . '/waypoints/lib/jquery.waypoints.min.js');
}
add_action('wp_enqueue_scripts', 'add_js_scripts');
herrfischer
  • 1,768
  • 2
  • 22
  • 35
  • Are there any errors in your javascript console? You could add `console.log("running script");` to the start of the script, then "running script" should show up in console if the script is actually running. – Luna Jul 16 '15 at 08:53
  • accidental duplicate of [How to make jQuery waypoints plugin fire when an element is in view and not scrolled past?](http://stackoverflow.com/questions/12497122/how-to-make-jquery-waypoints-plugin-fire-when-an-element-is-in-view-and-not-scro) – Luna Jul 16 '15 at 09:09

2 Answers2

1

Did you try with:

$(document).ready(function() {
    $('#footer').waypoint(function() {
        handler: function(direction) {
            $('body').addClass("foo");
        },
        offset: '90%'
    });
});

Check out the Getting started page.

dingo_d
  • 11,160
  • 11
  • 73
  • 132
1

Waypoints run when you scroll past an element. This can never happen with the footer, as it will always be on the page. You can add an offset to work around this.

$(document).ready(function() {
    $('#footer').waypoint(function() {
       $('body').addClass("foo");
    }, { offset: 'bottom-in-view' });
});

The waypoint will now run when the bottom of the footer element is within view. You could also set offset to '100%' to run if any of the footer element is in view.

Luna
  • 1,447
  • 1
  • 18
  • 32
  • No this doesn't help. Also added some line-breaks after #footer - still nothing happens. – herrfischer Jul 16 '15 at 09:14
  • @HenningFischer Are you sure? Seems to be working with that code. When I scroll to the bottom of the page, the `foo` css class is added to body. Did you want something else to happen? – Luna Jul 16 '15 at 09:16
  • Whooops now it works i think i had to clear the cache, THX a lot! Also i think i have to work with "inview.js" when i want to trigger a function if the top of an objects hits the viewport. – herrfischer Jul 16 '15 at 09:18
  • 1
    @HenningFischer what about `offset: '100%'`? That should trigger when the top of the footer hits the bottom of the window. – Luna Jul 16 '15 at 09:22
  • Wow cool, i think i had a misunderstanding about how waypoints really works. – herrfischer Jul 16 '15 at 09:26
  • 1
    You should really check out getting started page, everything is really well documented and explained. – dingo_d Jul 16 '15 at 09:37