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

【问题标题】：Hide div when scrolled to specific anchor points using Fullpage.js使用 Fullpage.js 滚动到特定锚点时隐藏 div
【发布时间】：2013-12-10 13:24:13
【问题描述】：

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

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

这个可以吗？

感谢您的帮助...

【问题讨论】：

是的，可以做到。但首先向我们展示你到目前为止所做的尝试

标签： javascript jquery html css fullpage.js

【解决方案1】：

正确的做法是使用 fullPage 事件。在这种情况下：afterLoad 或 onLeave Take a look at the documentation 了解更多关于如何使用它们的信息。

您可以看一下这个生动的示例，其中顶部菜单根据用户是否在第一部分中淡入或淡出： 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();   
          }
      }
  });

【讨论】：

您好，感谢您的快速回复。这仍然适用于“固定页眉和页脚”版本吗？例如，我可以说让页脚在滚动到#biog（第 2 节）时淡出，但在滚动到 #email（第 3 节）时再次淡入？
是的，你想要什么，为什么不呢？
你能告诉我我会怎么做吗？
我已经告诉过你怎么做。你还需要什么？查看我发布的代码以及活生生的示例代码。如果你不给我你的网站网址，我就不能更具体了。
请原谅我仍然无法完成这项工作，但非常感谢您抽出时间提供帮助。这是我试图在滚动到 #anchor2 时隐藏但在滚动到 #anchor3 时显示的内容... jsfiddle.net/4XYJC/4 你能告诉我你的例子如何与这个 Div 一起工作吗？

【解决方案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');
    }
});

【讨论】：

非常感谢，但请参阅下面我的问题......这仍然适用于“固定页眉和页脚”版本吗？例如，我可以说让页脚在滚动到#biog（第 2 节）时淡出，但在滚动到 #email（第 3 节）时再次淡入？
@markkane，这不是完美的解决方案。您可以在没有锚点的情况下运行 fullpage.js 或使用锚点运行它，您可能有部分锚点看起来像 #sectionName/slideName