TechQA.

Please explain context for the offset function in this jQuery code

71 views Asked by At

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>
jquery closures this jquery-context
Original Q&A
1

There are 1 answers

4
SpaceDog On BEST ANSWER

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.

Related Questions in JQUERY

Related Questions in CLOSURES

Related Questions in THIS

Related Questions in JQUERY-CONTEXT

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Trending Questions