Please explain context for the offset function in this jQuery code

Question

I'm trying to set up some cool effects with jQuery waypoints. But I'm not very good with javascript/jQuery. I'm more familiar with PHP.

The waypoint code provides a trigger events based on page scrolling. In the code below, I've used their "sticky" option, which is just supposed to set matching elements' class to "stuck" when the window scrolls past a certain point.

So, apparently, after 'sticky', I can pass in some options enclosed by braces. I want the waypoint to trigger based on the element's position relative to other elements with the same class (.example-basic). The first element will trigger at 0 (when the window hits the top of the element), the second element will trigger when the window gets N away from the top of the element, where N is the height of the previous element.

The big problem I'm finding is that variable current is being set to -1. I can't get its order in the list. I'm guessing that offset: function doesn't know what this is. How do I get it to work?

$('.example-basic').waypoint('sticky',
        { offset: function() {
            var current = $('.example-basic').index(this);
            console.log('sticky Current index: ' + current);
            var total = 0;
            for(var i=0; i<current;i++) {
                total += heights[ i ];
            }
            /*var total = 0;
            $('.stuck').each( function(index, value) {
                total -= $(value).height();
            });*/
            console.log('Total: ' + total);
            return total;
            /*var total = 0;
            $('.stuck').each( function(index, value) {
                total -= $(value).height();
            });
            return total;*/
        }
    });

EDIT: FULL SCRIPT (including CSS, HTML, and javascript/jQuery) (I replaced some repetitive HTML with php echo loops)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="/includes/js/waypoints/waypoints.min.js"></script>
<script src="/includes/js/waypoints/shortcuts/sticky-elements/waypoints-sticky.js"></script>
<script type="text/javascript">
/*$(document).ready(function(direction) {
    $('#testing-waypoints').waypoint(function() {
        notify('Direction is ' + direction);
    });
});*/
/*$(function() {
    var notify = function(message) {
      var $message = $('<p style="display:none;">' + message + '</p>');

      $('.notifications').append($message);
      $message.slideDown(300, function() {
        window.setTimeout(function() {
          $message.slideUp(300, function() {
            $message.remove();
          });
        }, 2000);
      });
    };
});*/
$(document).ready(function(direction) {
    var notify = function(message) {
        var $message = $( message );
        if(direction == 'down') {
            $('.notifications').append($message);
            /* $message.slideDown(300, function() {
                window.setTimeout(function() {
                $message.slideUp(300, function() {
                $message.remove();
                  });
                }, 2000);
              });*/
        }
    };
    var heights = [];
    $('.example-basic').each( function(index, value) {
        heights[ index ] = $(value).height();
    });
    console.log('Heights: ' + heights);
    $('.example-basic').waypoint(function(direction) {

    $('.example-basic').waypoint('sticky',
        { offset: function() {
            console.log(this);
            console.log($(this));
            /*var first = $(this).children.first();*/
            var first = $('.example-basic').index($(this).children().first());
            console.log('first: ');
            console.log(first);
            /*var current = $('.example-basic').index(this);*/
            var current = first;
            var total = 0;
            for(var i=0; i<current;i++) {
                total += heights[ i ];
            }
            /*var total = 0;
            $('.stuck').each( function(index, value) {
                total -= $(value).height();
            });*/
            console.log('Total: ' + total);
            return total;
            /*var total = 0;
            $('.stuck').each( function(index, value) {
                total -= $(value).height();
            });
            return total;*/
        }
    });
    /*$('.stuck').each( function(index, value) {

    });*/



        if(direction == 'down') {
            /*notify($(this));*/
            $('#stuck-elements-wrapper').append($(this).clone());
            $(this).hide();
        } else {
            /*$('#stuck-elements-wrapper div:last-child').remove();*/
            $('#stuck-elements-wrapper').children().last().remove();
            $(this).show();
        }

    }, { offset: function() {
            var current = $('.example-basic').index(this);
            console.log('Current index: ' + current);
            var total = 0;
            for(var i=0; i<current;i++) {
                total += heights[ i ];
            }
            /*var total = 0;
            $('.stuck').each( function(index, value) {
                total -= $(value).height();
            });*/
            console.log('Total: ' + total);
            return total;
        }
    });
});
</script>
<style type="text/css">
.example-basic {
    border: 1px solid black;
    height: auto;
    width: 900px;
    text-align:center;
}
#stuck-elements-wrapper {
    position: fixed;
    z-index:25;
    height:0;
    overflow:visible;
    left:0;
    right:0;
    top:0px;
}
.stuck {
    position:relative;
    background-color:white;
}

</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<div id="stuck-elements-wrapper" class="notifications">
</div>
<div class="container">
        <h1>jQuery Stick &lsquo;em</h1>

        <div class="row stickem-container">
            <div class="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>

            <div id="testing-waypoints" class="aside stickem">
                <h2>Testing Waypoints</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
        </div>

        <div class="row stickem-container">
            <div class="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>

            <div class="aside stickem">
                <h2>Heading</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>
<div class="example-basic" style="height:auto">
<p>Testing</p>
<p>2nd p tag</p>
</div>


        <div class="row stickem-container">
                <div class="content">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>

                <div class="aside stickem">
                    <h2>Heading</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                </div>
            </div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<?php
foreach(array(range(1,15) as $index) {
echo '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>';
}
?>
  <?php
foreach(array(range(1,15) as $index) {
echo '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>';
}
?>
    </div>
        <div class="example-basic">
    <p>Testing 2</p>
    </div>

    <div class="row stickem-container">
                <div class="content">
                    <?php
foreach(array(range(1,15) as $index) {
echo '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>';
}
?>
                </div>

                <div class="aside stickem">
                    <h2>Heading</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                </div>
            </div>
            <?php
foreach(array(range(1,15) as $index) {
echo '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>';
}
?>
        </div>

    </body>
    </html>

score 1 · Accepted Answer · answered Aug 12 '13 at 02:37

1

Your problem is that this in the offset function isn't the actual example-basic div but the sticky-wrapper div that waypoints has created. So it doesn't match in the index function. Do:

console.log(this);

At the top of the function to see that, once you know that it's relatively easy you just need to get the inner element, one way would be:

var current = $('.example-basic').index($(this).children().first());

which gets the first child of the wrapper div, which is what you want. That seems to generate the correct value of current for me.

I'm not sure if that's the fastest way to do it, maybe

var current = $('.example-basic').index($(this).children(':first-child'));

is clearer. You'll probably need to experiment at bit.

answered Aug 12 '13 at 02:37

SpaceDog

3,249
1
17
25

I'm not super concerned about time, as I have never witnessed a noticeably slow jQuery script. But when I tried your solution, the browser froze completely when I scrolled down to the first target div. I've posted the entire script now (with some HTML sections replaced by PHP echo loops to save space). If you can tell what the problem is I would be very grateful. Thanks. – Buttle Butkus Aug 12 '13 at 05:12
The formatting of your question is broken but I get the idea. The issue is an infinite loop of the waypoint handler function (not the sticky handler). You can see this if you put a console log at the top of that function after `$('.example-basic').waypoint(function(direction) ...`. I suspect that's an issue with editing the waypoint function inside itself rather than the change I did. What effect are you trying to achieve? – SpaceDog Aug 12 '13 at 08:46
In fact, calling the `.waypoint()` function on _any_ element from inside the waypoint handler function causes an infinite loop. This looks like it's due to the way the plugin is implemented, you probably need a different approach (involving setting up everything first and then altering settings) rather than trying to change the functions on the fly. – SpaceDog Aug 12 '13 at 09:03
Thanks for the hint. I think I might have put that second waypoint inside the first by mistake. They allow you to attach multiple waypoints to any element. I simply moved that inner waypoint function outside, right above the outer one, and now things are working much better. Good work, sir. Thanks again. – Buttle Butkus Aug 13 '13 at 03:44

Please explain context for the offset function in this jQuery code

1 Answers1