jQuery Waypoints - функции, кажется, переопределяют друг друга

Question

это мой первый пост здесь, в StackOverflow. Кажется, я не могу найти ответ на проблему, связанную с jQuery Waypoints. (Я довольно новичок в кодировании, поэтому извините меня, если у этого есть простое решение).

В основном у меня есть сайт на одной странице с 5 разделами, которые выглядят как отдельные страницы. Я закодировал его так, что, когда вы достигаете вершины каждой страницы, HTML-страница изменяется с помощью jQuery. Затем, когда вы приближаетесь ближе к нижней части этого раздела, содержимое в следующем разделе ниже исчезает. Все это прекрасно работает. Тем не менее, когда я прокручиваю резервную копию, HTML-страница страницы изменяется, когда я нахожусь в верхней части раздела, но рядом с ней (так что точка, которая заставляет содержимое на следующей странице затухать). Что еще более важно, что он, похоже, меняет его на заголовок предыдущей страницы, а не на текущую.

Посмотрите на эту ссылку, чтобы увидеть, что я имею в виду: http://lovecolour.co.nz/uploader/site1/index.html

Прокрутить вниз до раздела оранжевый Branding. Затем прокрутите резервную копию и посмотрите, что происходит с заголовком 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() внутри вложенных обработчиков сделает трюк.