jQueryウェイポイント - 関数は互いにオーバーライドしているようです。

Question

これは私の最初の投稿StackOverflowです。私はjQuery Waypointで問題が発生した場合、その回答を見つけることができないようです。 （これは単純な解決策があれば私は非常に私に言い訳をしています）。

基本的に私は1ページのサイトに5つのセクションがあり、個々のページのように見えます。私はそれをコード化して、各ページのトップに達すると、ページの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"); 
    } 
}); 

は私が得ることができるすべてのヘルプをいただければ幸いです - 私はすべてが明らかであると思います。 ありがとうございます

Answer 1

ウェイポイントはイベント（waypoint.reached）を使用してコールバックを発生させます。 JavaScriptでイベントがバブルします。したがって、#bLineDigitalが#digitalの子孫であるようなネストされたウェイポイントがある場合、ネストされたウェイポイントを押すとそのイベントがバブルし、外側のトリガーもトリガーされます。あなたはバブリングをやめなければなりません。ネストされたハンドラ内のevent.stopPropagation()がそのトリックを行います。