これは 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");
}
});
私が得ることができるすべての助けに感謝します-すべてが明確であることを願っています. 前もって感謝します