Fixing Jquery Waypoint

JavaScript
1

Good day, I’m trying to teach myself Jquery waypoints and right now i’m having trouble trying to make it work. The idea is once the element is visible on the screen it would display an “alert” saying “this element is visible”. But whenever i scroll down the alert doesn’t seem to appear. Here is a sample of my code.

HTML

    <section class="container">
        <div class="sixteen columns item"></div>
        <div class="sixteen columns item"></div>
        <div class="sixteen columns item"></div>
        <div class="sixteen columns item"></div>
        <div class="sixteen columns item"></div>
        <div class="sixteen columns item"></div>
        <div class="sixteen columns item"></div>
        <div class="sixteen columns item"></div>
        <div class="sixteen columns item"></div>
        <div class="sixteen columns item thing entry" id="example-basic"></div>
    </section>

If i place this part on top of the others it seems to be working and the alert is displayed


    <div class="sixteen columns item thing entry" id="example-basic"></div>

Javascript


    <script>
    $('.entry').waypoint(function() {
       alert('The element appeared on the screen.');
    });
    </script>
2

Hi,

This:

$('.entry').waypoint(function() {
  alert('The element appeared on the screen.');
});

should cause an alert to fire when the top of .entry hits the top of the viewport.

If you want your waypoint to trigger when the bottom of the element hits the bottom of the viewport, then use:

$('.thing').waypoint(function() {
  alert('The element appeared on the screen.');
},{
  offset: 'bottom-in-view'
});