0

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

航点代码提供基于页面滚动的触发事件。在下面的代码中，我使用了他们的“sticky”选项，它只是应该在窗口滚动超过某个点时将匹配元素的类设置为“stuck”。

因此，显然，在“粘性”之后，我可以传入一些用大括号括起来的选项。.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>
4

1 回答 1

1

您的问题是this偏移函数中的不是实际的example-basicdiv 而是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'));

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

于 2013-08-12T02:37:20.370 回答