javascript - 使用 Fullpage.js 滚动到特定锚点时隐藏 div

Question

我计划使用来自http://alvarotrigo.com/fullPage/的出色 Fullpage.js，但希望在滚动到特定锚点时隐藏特定的 div 或图像。

例如，如果页面从#home 开始并且有 3 个锚点（全屏部分）#home、#biog 和 #email 都在每个部分的顶部都有一个徽标，我希望例如隐藏 #biog 中的徽标（可能淡出）但在滚动到下一个锚点时重新显示（可能淡入）#email

这可以做到吗？

谢谢您的帮助...

Answer 1

正确的方法是使用 fullPage 事件。在这种情况下：afterLoad或onLeave 查看文档以获取有关如何使用它们的更多信息。

你可以看看这个活生生的例子，其中顶部菜单淡入或淡出取决于用户是否在第一部分：http: //jsfiddle.net/J8hqM/8/

它应该看起来像：

  // Script FullPage
  $.fn.fullpage({
      /* whatever config you have...*/
      afterLoad: function(anchor, index){
          if(index == 1){
               $('#menu').fadeOut();
          }else{
               $('#menu').fadeIn();   
          }
      }
  });

Answer 2

你可以使用jquery的$(window).bind( 'hashchange'功能。

$(window).bind( 'hashchange', function() {
    var winloc = window.location.href;
    if (winloc.substring(1) === "Yourpage") {
    //do something. For example:
    $("#Yourlogo").css('display', 'none');
    }
});