请解释此jQuery代码中offset函数的上下文

时间：2013-08-12 01:15:47

标签： jquery closures this jquery-context

我正在尝试使用jQuery航点设置一些很酷的效果。但我对javascript / jQuery不太满意。我对PHP更熟悉。

航点代码根据页面滚动提供触发事件。在下面的代码中，我使用了他们的“粘性”选项，当窗口滚动到某一点时，它只是将匹配元素的类设置为“卡住”。

所以，显然，在“粘性”之后，我可以传递括号括起来的一些选项。我希望根据元素相对于具有相同类（.example-basic）的其他元素的位置来触发航点。第一个元素将在0处触发（当窗口到达元素顶部时），当窗口从元素顶部移开N时，第二个元素将触发，其中N是前一个元素的高度。

我发现的一个大问题是变量current被设置为-1。我无法在列表中获得订单。我猜测offset: function不知道this是什么。我如何让它工作？

$('.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;*/
        }
    });

编辑：完整脚本（包括CSS，HTML和javascript / jQuery） （我用php echo循环替换了一些重复的HTML）

<!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>

1 个答案:

答案 0 :(得分：1)

你的问题是，偏移函数中的this不是实际的example-basic div，而是航路点创建的sticky-wrapper div。所以它在索引函数中不匹配。做：

console.log(this);

在函数的顶部看到，一旦你知道它相对容易，你只需要获得内部元素，一种方法是：

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

获取包装器div的第一个子节点，这就是你想要的。这似乎为我生成了current的正确值。

我不确定这是否是最快的方式，也许

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

更清楚。你可能需要进行一些实验。

相关问题
最新问题