fullpage.js并在页面顶部添加/删除类

Question

I'm having trouble with fullpage.js ( https://github.com/alvarotrigo/fullPage.js/ ) at http://vatuvara.com/

Basically I want #masthead to have a class of 'black-nav' added if the visitor is not in the first section of the page, and then I want this class removed if they are in the first section of the page.

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

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

This seems to work fine, except when I add a link to a section on the homepage eg. the 'About' nav links to http://vatuvara.com/#TheIslands . So I added a secondary script to change the masthead's class when #primary-menu a is clicked.

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

But the results are a bit mixed. Clicking on 'About', then scrolling back to the top of the page works about 50% of the time — the 'black-nav' class is removed, but the rest of the time it doesn't so #masthead continues to have the .black-nav class.

I also have another script which has similar results. I want the nav to be hidden when scrolling down, but re-appear when scrolling up. So I have this script below which seems to work about 70% of the time, the rest of the time #masthead continues to have the .black-nav class. And if you scroll to the very bottom of the page, then scroll back up the success rate drops to about 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

I solved this by removing fullpage's afterLoad function and instead using a .scrollTop function:

$(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");
    }
});