fullPage.js 滚动到固定标题

Question

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

我现在的标题标记：

<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

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

否则，您也可以使用诸如afterLoad 或onLeave 之类的回调来执行此操作。你有一个可用的例子in the fullpage.js files。

您甚至在this Apple demo 中也提供了如何使用它们的示例in the files to download。

Answer 2

这会有帮助吗？在第一部分它将类固定标题添加到您的导航中，而在其他部分它将消失

$(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');
}
});
});