1

ページをdivにロードしています。また、ユーザーがページを下にスクロールするとメニューの色が変わるように、ウェイポイントを確立しようとしています。

私が抱えている問題は、ajax コンテンツが読み込まれると、div の新しい高さがブラウザーによって認識されないことです。

ここに私が持っているものがあります:

$(".cta").live('click', function () {
    $('#faq').load('about-us/faqs/index.html'),
    function () {
        $("#faq").waypoint(function (event, direction) {
            if (direction === 'up') {
                $("#siteNav li a").removeClass("siteNavSelected");
                $("#siteNav li.nav3 a").addClass("siteNavSelected");
            }
        }, {
            offset: function () {
                return $.waypoints('viewportHeight') - $("#faq").outerHeight();
            }

        });
    }
    return false;
});

何か案は？ありがとう。

4

2 に答える 2

1

$.waypoints('refresh');ドキュメントからを使用します。

これにより、オフセット オプションに基づいて、各ウェイポイントのトリガー ポイントが再計算されます。これは、ウィンドウのサイズが変更されるか、新しいウェイポイントが追加されるたびに自動的に呼び出されます。これらのいずれかを実行せずにプロジェクトで DOM またはページ レイアウトを変更する場合は、手動で呼び出すことができます。

于 2013-07-04T16:58:36.633 に答える
0

プラグインの組み込みには詳しくありませんwaypointが、スクロール イベントをバインドして.scrollTop()値をキャプチャすることもできます。次のようになります。

$(document).bind('scroll', function(event) {        
    var scrollTop = $(window).scrollTop();
    if (scrollTop < 1000 && $('siteNav li').hasClass('styleA')) { return; }
    else { 
        $('siteNav li').removeClass('styleB');
        $('siteNav li').addClass('styleA');
    }
    if (scrollTop > 1000 && $('siteNav li').hasClass('styleB')) { return; }
    else {
        $('siteNav li').removeClass('styleA');
        $('siteNav li').addClass('styleB');
    }
});

適切な場所で動作させるには、値を少しいじる必要があります。また、ユーザーがページの上部にいて、マウスのスクロール ホイールを使用してページを下に移動した場合と同じように、テストでより大きい値またはより小さい値を使用する必要があります。その間のすべての値を取得することはできません。

于 2012-10-24T19:26:45.757 に答える