0

jQuery ウェイポイントを使用してクールな効果を設定しようとしています。しかし、私はjavascript/jQueryがあまり得意ではありません。私はPHPにもっと精通しています。

ウェイポイント コードは、ページのスクロールに基づいてトリガー イベントを提供します。以下のコードでは、「スティッキー」オプションを使用しました。これは、ウィンドウが特定のポイントを超えてスクロールしたときに、一致する要素のクラスを「スタック」に設定することになっています。

どうやら、'sticky' の後に、中かっこで囲まれたいくつかのオプションを渡すことができます。同じクラス ( ) を持つ他の要素に対する要素の相対的な位置に基づいてウェイポイントをトリガーする必要があり.example-basicます。最初の要素は 0 でトリガーされ (ウィンドウが要素の上部に達したとき)、2 番目の要素はウィンドウが要素の上部から 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;*/
        }
    });

編集: FULL SCRIPT (CSS、HTML、および javascript/jQuery を含む) (一部の繰り返し HTML を php エコー ループに置き換えました)

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

それを確認するための関数の先頭で、内部要素を取得するだけで比較的簡単であることがわかったら、1 つの方法は次のようになります。

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 に答える