0

現在、jQuery ウェイポイントを使用して、ページのセクションをスクロールするときにナビゲーション項目を強調表示しています。それはすべて正常に機能します。http://imakewebthings.github.com/jquery-waypoints/のデモからコードをコピーしていただきありがとうございます。

私のデモは次のとおりです。http://www.pandlmedia.com/index.php/index_new

ただし、すべてのナビゲーション リンクの色を変更するイベントをトリガーする #footer div にウェイポイントも作成したいと考えています。

$('#footer').bind('waypoint.reached', function(event, direction) {
    $('.nav ul a').addClass('white');
});

#footer div を終了すると、元に戻すように指示するものがないため、これは機能しません。jQuery を書いたり、このプラグインを使用したりする経験はあまりありません。これを機能させるには何を追加する必要がありますか? 2 レベルのウェイポイントがあることも問題の原因ですか?

4

1 に答える 1

0

さて、「スティッキー要素」のデモを詳しく見てみると、「.top」ボタンが消える例を修正して、上記の自分のニーズに合わせてこれを機能させることができました。

<script type="text/javascript">
$(document).ready(function() {
    $('.container .nav ul a').addClass('black');
    $.waypoints.settings.scrollThrottle = 30;
    $('#footer').waypoint(function(event, direction) {
        $('.container .nav ul a').toggleClass('black', direction === "up");
    }, {
        offset: '50%'
    });
});

重要なのは、css の .white クラスの下に .black クラスを追加して、color パラメータを適切にオーバーライドすることでした。

于 2012-02-13T03:39:46.780 に答える