fullpage.js 和 adding/removing class 在页面顶部

Question

我在使用 fullpage.js 时遇到了问题（https://github.com/alvarotrigo/fullPage.js/) at http://vatuvara.com/

基本上，如果访问者不在页面的第一部分，我希望#masthead 有一个 class 的 'black-nav' 添加，然后我希望删除这个 class 如果它们位于页面的第一部分。

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

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

这似乎工作正常，除非我将 link 添加到主页上的某个部分，例如。 'About' 导航 link 到 http://vatuvara.com/#TheIslands。所以我添加了一个辅助脚本来在单击#primary-menu a 时更改标头的 class。

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

但结果有点喜忧参半。单击 'About'，然后滚动回页面顶部大约有 50% 的时间有效 — 'black-nav' class 被删除，但其余时间却没有#masthead 继续拥有 .black-nav class.

我还有另一个具有类似结果的脚本。我希望在向下滚动时隐藏导航，但在向上滚动时隐藏 re-appear。所以我在下面有这个脚本，它似乎在大约 70% 的时间内工作，其余时间#masthead 继续拥有 .black-nav class。如果你滚动到页面的最底部，然后向上滚动，成功率会下降到大约 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

我通过删除 fullpage 的 afterLoad 函数并使用 .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");
    }
});

fullpage.js 和 adding/removing class 在页面顶部

fullpage.js and adding/removing class at top of page

javascript

jquery

addclass

fullpage.js