0

これは StackOverflow に関する私の最初の投稿です。jQuery Waypoints で発生した問題の答えが見つからないようです。(私はコーディングが初めてなので、これに簡単な解決策がある場合はすみません)。

基本的に、個々のページのように見える 5 つのセクションを持つ 1 ページのサイトがあります。各ページの先頭に到達すると、ページの HTML が jQuery によって変更されるようにコーディングしました。次に、そのセクションの一番下に近づくと、その下の次のセクションのコンテンツがフェードインします。これはすべて正常に機能します。ただし、上にスクロールすると、セクションの上部にいるときではなく、下部に近いときにページの HTML が変更されます (次のページのコンテンツがフェードインするポイント)。さらに、現在のページではなく、前のページのタイトルに変更しているようです。

このリンクを見て、私が何を意味するかを確認してください: http://lovecolour.co.nz/uploader/site1/index.html

オレンジ色の [ブランディング] セクションまで下にスクロールします。次に上にスクロールして、下部の白い点線をスクロールすると、HTML ページ タイトルがどうなるかを確認します。

基本的に、下に行くときはうまく機能するように見えます(ページの上部に到達するとタイトルが変わり、そのページの下部近くに到達するとコンテンツがフェードインします)。ただし、戻ると、後者の関数が最初の関数をオーバーライドするため、タイトルはページの上部ではなく点線の近くで変更されます。

jQueryコードは次のとおりです。

$("#digital .spacer").css({opacity:0})
$("#branding .spacer").css({opacity:0});
$("#print .spacer").css({opacity:0});
$("#about .spacer").css({opacity:0});

$("#clickToSee").waypoint(function(event, direction) {
    if(direction === "down") {
    $("#digital .spacer").animate({opacity: 1.0}, 200);
    }
    else {
    $("#digital .spacer").animate({opacity: 0.0}, 200);
    }
});

$("#bLineDigital").waypoint(function(event, direction) {
    if(direction === "down") {
    $("#branding .spacer").animate({opacity: 1.0}, 200);
    }
    else {
        $("#branding .spacer").animate({opacity: 0.0}, 200);
    }
});

$("#branding .dottedBottom").waypoint(function(event, direction) {
    if(direction === "down") {
    $("#print .spacer").animate({opacity: 1.0}, 200);
    }
    else {
        $("#print .spacer").animate({opacity: 0.0}, 200);
    }
});

$("#print .dottedBottom").waypoint(function(event, direction) {
    if(direction === "down") {
    $("#about .spacer").animate({opacity: 1.0}, 200);
    }
    else {
        $("#about .spacer").animate({opacity: 0.0}, 200);
    }
});

$("#digital").waypoint(function(event, direction) {
    if(direction === "down") {
    $("title").html("Digital");
    }
    else {
        $("title").html("LoveColour");
    }
});

$("#branding").waypoint(function(event, direction) {
    if(direction === "down") {
    $("title").html("Branding");
    }
    else {
        $("title").html("Digital");
    }
});
$("#print").waypoint(function(event, direction) {
    if(direction === "down") {
    $("title").html("Print");
    }
    else {
        $("title").html("Branding");
    }
});
$("#about").waypoint(function(event, direction) {
    if(direction === "down") {
    $("title").html("About LoveColour");
    }
    else {
        $("title").html("Print");
    }
});

私が得ることができるすべての助けに感謝します-すべてが明確であることを願っています. 前もって感謝します

4

1 に答える 1

0

ウェイポイントは、イベント ( waypoint.reached) を使用してコールバックを起動します。JavaScript でイベントがバブルします。したがって、 how#bLineDigitalが の子孫のようにネストされ#digitalたウェイポイントがある場合、ネストされたウェイポイントにヒットすると、そのイベントがバブルされ、外側のイベントもトリガーされます。泡立ちを止めるしかありません。event.stopPropagation()ネストされたハンドラー内でうまくいきます。

于 2012-05-11T14:41:30.287 に答える