jQuery Waypoints - 功能似乎是互相重疊

這是我在StackOverflow上的第一篇文章。我似乎無法找到我用jQuery Waypoint獲得的問題的答案。（我對編碼很陌生，所以如果這有一個簡單的解決方案，請原諒我）。jQuery Waypoints - 功能似乎是互相重疊

基本上我有一個頁面上有5個部分，它看起來像個人頁面。我對它進行了編碼，以便當您到達每個頁面的頂部時，通過jQuery更改頁面的HTML。然後當你接近該部分的底部時，下面下一部分的內容將淡入。這一切都可以正常工作。但是，當我滾動備份時，頁面的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"); 
    } 
});

我很感激所有幫助我能得到 - 我希望一切都清楚了。在此先感謝

來源

2012-05-11 user1386254

Waypoints使用事件（waypoint.reached）來觸發回調。 JavaScript中的事件冒泡。所以如果你有嵌套的航點，比如#bLineDigital是#digital的後裔，點擊嵌套的航點將觸發該事件並觸發外部航點。你只需要停止冒泡。嵌套處理程序中的event.stopPropagation()將執行此操作。

來源

2012-05-11 14:41:30 imakewebthings

什麼傳說！這是我之後的確切解決方法，謝謝！ – user1386254

jQuery Waypoints - 功能似乎是互相重疊

回答

相關問題