Javascript fullPage.js滚动至固定标题
我有一个页面,上面有一个水平导航,这是一个标题img。我使用fullPage.js作为布局,默认情况下,导航栏始终位于顶部。我希望我的标题img只出现在第一部分,并隐藏在其他任何地方。我在考虑jQuery中的一个解决方案,如果我在每个部分,但第一个页眉边距顶部将是Javascript fullPage.js滚动至固定标题,javascript,jquery,html,css,fullpage.js,Javascript,Jquery,Html,Css,Fullpage.js,我有一个页面,上面有一个水平导航,这是一个标题img。我使用fullPage.js作为布局,默认情况下,导航栏始终位于顶部。我希望我的标题img只出现在第一部分,并隐藏在其他任何地方。我在考虑jQuery中的一个解决方案,如果我在每个部分,但第一个页眉边距顶部将是[header\u img\u height],当我到达第一部分时,它将返回到边距顶部:0px 当前我的标题标记: <header> <div id="header_banner"> </div&g
[header\u img\u height]
,当我到达第一部分时,它将返回到边距顶部: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
-
-
-
-
-
.
.
.
其他章节
这就是我想要的结局:
这有帮助吗?在第一部分中,它将类固定标题添加到导航中,而在其他部分中,它将消失
$(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');
}
});
});
我建议你直接用CSS来做。 查看其中的内容,您可以看到如何使用添加到
body
元素的类来触发您自己的CSS更改
否则,您也可以使用诸如或之类的回调来完成。你有一个例子
您甚至有一个如何在中使用它们的示例 我希望我的导航保持在顶部并保持固定,并且我的标题图像隐藏在所有部分中,但首先是我希望标题图像出现的位置。fullpage.js默认行为不会触发滚动事件。