fullpage.js и добавление/удаление класса в верхней части страницы

Question

У меня возникли проблемы с fullpage.js (https://github.com/alvarotrigo/fullPage.js/) в http://vatuvara.com/

В основном я хочу #masthead иметь класс «черного нав добавил, если посетитель не находится в первом разделе страницы, а затем я хочу, чтобы этот класс был удален, если они находятся в первом разделе страницы.

$(document).ready(function() { 
    $('#primary').fullpage({ 
     menu: '#masthead', 

     afterLoad: function(anchor, index){ 
     if(index == 1){ 
      $('#masthead').removeClass('black-nav'); 
     }else{ 
      $('#masthead').addClass('black-nav'); 
     } 
     } 
    }); 
}); 

Это похоже на работу, за исключением случаев, когда я добавляю ссылку на раздел на главной странице, например. ссылки «About» на http://vatuvara.com/#TheIslands. Поэтому я добавил дополнительный скрипт, чтобы изменить класс мачты, когда нажимается # primary-menu a.

$(document).ready(function() { 
    $("#primary-menu a").click(function() { 
    $('#masthead').addClass('black-nav'); 
    }); 
}); 

Но результаты немного смешаны. Нажав «О», прокрутка вверх в верхней части страницы работает примерно в 50% случаев - класс «черный-nav» удаляется, но в остальное время это не так. #masthead продолжает иметь .black-nav class.

У меня также есть другой скрипт, который имеет похожие результаты. Я хочу, чтобы навигатор был скрыт при прокрутке вниз, но снова появляется при прокрутке. Таким образом, у меня есть этот скрипт ниже, который, похоже, работает около 70% времени, а остальное время #masthead продолжает иметь класс .black-nav. И если вы перечисляете в самом низу страницы, а затем прокрутить назад вверх вероятность успеха снижается до 50%

// Hide Header on on scroll down 
    var didScroll; 
    var lastScrollTop = 0; 
    var delta = 5; 
    var navbarHeight = $('#masthead').outerHeight(); 

    $(window).scroll(function(event){ 
    didScroll = true; 
    }); 

    setInterval(function() { 
    if (didScroll) { 
     hasScrolled(); 
     didScroll = false; 
    } 
    }, 250); 

    function hasScrolled() { 
    var st = $(this).scrollTop(); 

    // Make sure they scroll more than delta 
    if(Math.abs(lastScrollTop - st) <= delta) 
     return; 

    // If they scrolled down and are past the navbar, add class .nav-up. 
    // This is necessary so you never see what is "behind" the navbar. 
    if (st > lastScrollTop && st > navbarHeight){ 
     // Scroll Down 
     $('#masthead').fadeOut(); 
    } else { 
     // Scroll Up 
     if(st + $(window).height() < $(document).height()) { 
     $('#masthead').fadeIn(); 
     } 
    } 

    lastScrollTop = st; 
    } 

Answer 1

Я решил, убрав функцию постнагрузки Всей страницы и вместо того, чтобы с помощью функции .scrollTop:

$(document).ready(function() { 
    $('#primary').fullpage({ 
     anchors: ['home', 'TheIslands', 'TheResort', 'Accomodation', 'AccomodationPhoto', 'Nature', 'NaturePhoto', 'CulinaryExperience', 'CulinaryExperienceLocations', 'CulinaryExperiencePhoto', 'CulinaryExperienceSeafood', 'Spa', 'SpaAbout', 'Activities', 'ActivitiesPhoto', 'Culture', 'Travel', 'Footer'], 
     menu: '#masthead', 
     slidesNavigation: true, 
     slidesNavPosition: 'bottom', 
     controlArrows: false, 
     scrollBar: true, 
     responsiveWidth: 900, 
    }); 
}); 

$(window).scroll(function() {  
    var scroll = $(window).scrollTop(); 

    if (scroll >= 500) { 
     $("#masthead").addClass("black-nav"); 
    } else { 
     $("#masthead").removeClass("black-nav"); 
    } 
});