Fullpage.js固定导航栏-实现定位导航栏
FullPage.js 是一个简单而易于使用的插件，用来创建全屏滚动网站（也被称为单页网站）。除了可以创建全屏滚动效果以外，也可以给网站添加一些水平的滑块效果。能够自适应不同的屏幕尺寸，包括平板电脑和移动设备。
开始制作自己的个人简历啦，决定要使用固定导航栏，又打算使用fullpage.js做全屏滚动。
仔细看了fullpage文档之后，发现不用额外写js代码就可以实现以下效果：
1.当滚动翻页时，导航栏也自动定位到这一页的标签
2.当然点击标签时，也是滚动到那一页而不是直接跳转的。
一、准备工作肯定是要先导入fullpage.js啦；
官网是https://github.com/alvarotrigo/fullPage.js
<link rel="stylesheet" href="styles/jquery.fullPage.css"> <script src="scripts/jquery.min.js"></script> <script src="scripts/jquery.fullPage.min.js"></script>
fullpage是基于jquery的，所以要记得导入jquery哦。
二、导航栏结构
<ul id="myMenu"> <li data-menuanchor="firstPage" class="menuList"><a href="#firstPage">首页</a></li> <li data-menuanchor="secondPage"class="menuList"><a href="#secondPage">作品</a></li> <li data-menuanchor="thirdPage" class="menuList"><a href="#thirdPage">技能</a></li> <li data-menuanchor="fourthPage"class="menuList"><a href="#fourthPage">联系方式</a></li> </ul>
上面导航栏的结构是这样的，其中的data-menuanchor就是fullpage要求的，a便签的href属性也要相对应的值咯。
三、滚动页的结构很简单，如下
<div id="fullpage"> <div class="section">1</div> <div class="section">2</div> <div class="section">3</div> <div class="section">4</div> </div>
四、要配置fullpage,js
$(document).ready(function() {
$('#fullpage').fullpage({
paddingTop: '50px',
anchors:['firstPage', 'secondPage', 'thirdPage','fourthPage'],
menu: '#myMenu'});
});
我的配置内容如图，第一条 paddingTop: '50px'，是为了给固定导航栏腾出空间
第二条：anchors,这个是依次给滚动页设置锚点，注意这里需要和导航栏里的li标签的data-menuanchor属性以及a的href属性对应。
第三条：就是绑定菜单，也就是上面的导航栏。
五、增加active类的样式
这样，fullpage就配置好了，但是导航栏的样式还不能根据页面变化我们先查看一下控制台
当页面滚动时，fullpage.js会给菜单里的对应项加入active类，这样就好办了我们加一条css样式，给active类改变背景色
.active{background-color: #609F98;}
这样，所有的效果就实现啦
PS:潜在的小bug，因为fullpage会在当前滚动页也加入active类，也就意味着这个css样式会影响该页的背景颜色（还好我用的背景图，不受影响，机智如我，哈哈），我猜想要解决的话，那可能要给section类加背景颜色，再加个!important吧。
好了，关于Fullpage.js固定导航栏-实现定位导航栏的相关内容就给大家介绍到这里，希望对大家有所帮助！
相关文章
Three.js使用OrbitControls后修改相机旋转方向无效解决办法
three.js是用javascript写的基于webGL的第三方3D库,下面这篇文章主要给大家介绍了关于Three.js使用OrbitControls后修改相机旋转方向无效的解决办法,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-01-01
什么是函数式编程？根据百度百科的描述，“函数式编程是种编程典范，它将电脑运算视为函数的计算。函数编程语言最重要的基础是 λ 演算（lambda calculus）。而且λ演算的函数可以接受函数当作输入（参数）和输出（返回值）。”2015-10-10
这篇文章主要给大家介绍了关于如何基于three.js实现的3D粒子动效的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用three.js具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-04-04
这篇文章主要给大家介绍了关于js数组常用19种方法,大家可以看看你会的到底有多少呢,在日常开发中我们会接触到js中数组的一些方法,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了js获取url页面id，也就是最后的数字文件名，有时候我们需要判断当前页面的id，又不用重新生成页面直接用js获取最后的数字.htm即可2020-09-09
跟网上的一些常用的不太一样，个人都有个人常用的代码，大家看到好东西，不一定什么都会，起码要知道有这么个东西。方便以后用也方便找。2009-04-04
众所周知,微信小程序制作成功后,是需要提交到微信公众平台去审核的,审核通过后,才可以发布上线的,上线了之后才可以进行运营的,下面这篇文章主要给大家介绍了关于微信小程序上线发布具体流程的相关资料,需要的朋友可以参考下2022-10-10
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
下面小编就为大家带来一篇原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
这篇文章主要介绍了JavaScript中的操作符==与===介绍,本文讲解了===操作符的判断规则、==操作符的判断规则,需要的朋友可以参考下2014-12-12
这篇文章主要给大家介绍了关于微信小程序HTTP请求从0到1封装的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用微信小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-09-09
最新评论