fullPage.js 滚动到固定 header

Question

我有一个顶部有水平导航的页面，上面是一个 header img。我使用 fullPage.js 作为我的布局，默认情况下导航栏总是在最上面。我希望我的 header img 只出现在第一部分，而隐藏在其他地方。我正在考虑 jQuery 中的一个解决方案，如果我在每个部分，但第一个 header margin-top 将是 [header_img_height]，当我到达第一部分时它会return 到 margin-top:0px。

我现在的 header 标记：

<header>
  <div id="header_banner">
  </div>
  <ul id="nav_cont">
     <li data-menuanchor="section1">
        <a id="home_hover" href="#section1">Home</a>
     </li>
     <li data-menuanchor="section2">
        <a id="about_hover" href="#section2/1">About</a>
     </li>
     <li data-menuanchor="section3">
        <a id="gallery_hover" href="#section3">Gallery</a>
     </li>
     <li data-menuanchor="section4">
        <a id="literature_hover" href="#section4">Literature</a>
     </li>
     <li data-menuanchor="section5">
        <a id="contact_hover" href="#section5">Contact</a>
     </li>
  </ul>
</header>
<div id="fullpage">
  <div class="section" id="Home">
     <div class="container"></div>
  </div>
  .
  .
  .
other sections

这就是我想要的结果：

Answer 1

这有帮助吗？在第一部分，它将 class fixed-header 添加到您的导航栏，而在其他部分，它将消失

$(function(){
$(window).scroll(function(){
var section1 = $('#home').offset().top;
var section2 = $('#section2').offset().top;
if($(this).scrollTop()>=section1){
$('#nav_cont').addClass('fixed-header');
}
if($(this).scrollTop()>=section2){
$('#nav_cont').removeClass('fixed-header');
}
});
});

Answer 2

我建议你直接用 CSS 来做。查看 this video tutorial，您可以在其中了解如何使用添加到 body 元素的 class 来激发您自己的 CSS 更改。

否则，您也可以使用 afterLoad or onLeave. You have an example of it available in the fullpage.js files.

等回调来完成

您甚至在 this Apple demo also available in the files to download 中有一个如何使用它们的示例。

fullPage.js 滚动到固定 header

fullPage.js scroll to fixed header

javascript

jquery

html

css

fullpage.js