[英]fullPage.js scroll to fixed header
我有一个页面顶部和上方的水平导航,这是一个标题img。 我使用fullPage.js作为我的布局,默认情况下,navbar始终位于顶部。 我希望我的标题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
这就是我想要的结果:
我建议你直接使用CSS。 查看此视频教程 ,您可以在其中查看如何使用添加到body
元素的类来触发您自己的CSS更改。
否则,您也可以使用afterLoad
或onLeave
等回调来执行此操作。 您可以在fullpage.js文件中找到它的示例。
您甚至可以在这个Apple演示中有一个如何使用它们的示例,也可以在要下载的文件中找到 。
这会有帮助吗? 在第一部分,它将类固定标题添加到您的导航,而在其他部分,它将消失
$(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');
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.