Question

我在https://github.com/alvarotrigo/fullPage.js/

上遇到fullpage.js（http://vatuvara.com/）时遇到问题

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

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

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

这似乎工作正常，除非我添加链接到主页上的部分，例如。 '关于'导航链接到http://vatuvara.com/#TheIslands。所以当点击＃primary-menu a时，我添加了一个辅助脚本来更改标头的类。

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

但结果有点混乱。单击“关于”，然后滚动回到页面顶部大约50％的时间 - “黑色导航”类被删除，但其余时间不是这样#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

我通过删除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和在页面顶部添加/删除类

1 个答案: