Fullpage.js固定导航栏-实现定位导航栏


Posted in Javascript onMarch 17, 2016

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属性对应。

第三条:就是绑定菜单,也就是上面的导航栏。

更多配置项参考这里:https://github.com/Niefee/My-study-records/blob/master/2016/1/2016%E5%B9%B41%E6%9C%8818%E6%97%A5.markdown

五、增加active类的样式

这样,fullpage就配置好了,但是导航栏的样式还不能根据页面变化我们先查看一下控制台

Fullpage.js固定导航栏-实现定位导航栏

当页面滚动时,fullpage.js会给菜单里的对应项加入active类,这样就好办了我们加一条css样式,给active类改变背景色
.active{background-color: #609F98;}

这样,所有的效果就实现啦

PS:潜在的小bug,因为fullpage会在当前滚动页也加入active类,也就意味着这个css样式会影响该页的背景颜色(还好我用的背景图,不受影响,机智如我,哈哈),我猜想要解决的话,那可能要给section类加背景颜色,再加个!important吧。

好了,关于Fullpage.js固定导航栏-实现定位导航栏的相关内容就给大家介绍到这里,希望对大家有所帮助!

Javascript 相关文章推荐
[原创]来自ImageSee官方 JavaScript图片浏览器
Jan 16 Javascript
解决AJAX中跨域访问出现'没有权限'的错误
Aug 20 Javascript
jQuery 1.5最新版本的改进细节分析
Jan 19 Javascript
js导出格式化的excel 实例方法
Jul 17 Javascript
JS 排序输出实现table行号自增前端动态生成的tr
Aug 13 Javascript
jquery操作复选框checkbox的方法汇总
Feb 05 Javascript
莱鸟介绍window.print()方法
Jan 06 Javascript
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
Jun 12 Javascript
node.js的事件机制
Feb 08 Javascript
layui上传图片到服务器的非项目目录下的方法
Sep 26 Javascript
html实现随机点名器的示例代码
Apr 02 Javascript
使用Canvas绘制一个游戏人物属性图
Mar 25 Javascript
基于socket.io+express实现多房间聊天
Mar 17 #Javascript
盘点javascript 正则表达式中 中括号的【坑】
Mar 16 #Javascript
教你用javascript实现随机标签云效果_附代码
Mar 16 #Javascript
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
Mar 16 #Javascript
js纯数字逐一停止显示效果的实现代码
Mar 16 #Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
Mar 16 #Javascript
js获取时间精确到秒(年月日)
Mar 16 #Javascript
You might like
微博短链接算法php版本实现代码
2012/09/15 PHP
php笔记之:AOP的应用
2013/04/24 PHP
ThinkPHP框架任意代码执行漏洞的利用及其修复方法
2014/07/04 PHP
js类中获取外部函数名的方法与代码
2007/09/12 Javascript
JavaScript中:表达式和语句的区别[译]
2012/09/17 Javascript
Javascript 按位与运算符 (&amp;)使用介绍
2014/02/04 Javascript
javascript获得当前的信息的一些常用命令
2015/02/25 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
2015/06/15 Javascript
JS动态日期时间的获取方法
2015/09/28 Javascript
javascript中return,return true,return false三者的用法及区别
2015/11/17 Javascript
EasyUI在表单提交之前进行验证的实例代码
2016/06/24 Javascript
BootStrap select2 动态改变值的方法
2017/02/10 Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
2017/07/12 Javascript
修改UA在PC中访问只能在微信中打开的链接方法
2017/11/27 Javascript
nodejs使用redis作为缓存介质实现的封装缓存类示例
2018/02/07 NodeJs
关于vue3默认把所有onSomething当作v-on事件绑定的思考
2020/05/15 Javascript
[02:37]2015国际邀请赛选手档案—LGD.Xiao8
2015/07/28 DOTA
python异步任务队列示例
2014/04/01 Python
python中while循环语句用法简单实例
2015/05/07 Python
python-OpenCV 实现将数组转换成灰度图和彩图
2020/01/09 Python
Python selenium 自动化脚本打包成一个exe文件(推荐)
2020/01/14 Python
Django中文件上传和文件访问微项目的方法
2020/04/27 Python
使用PyQt的QLabel组件实现选定目标框功能的方法示例
2020/05/19 Python
解决margin 外边距合并问题
2019/07/03 HTML / CSS
英国标志性奢侈品牌:Burberry
2016/07/28 全球购物
Java方面的关于数组和继承的笔面试题
2015/09/18 面试题
医学检验专业个人求职信范文
2013/12/04 职场文书
邮政员工辞职信
2014/01/16 职场文书
银行委托书范本
2014/04/04 职场文书
思想作风建设心得体会
2014/10/22 职场文书
普通党员个人整改措施
2014/10/27 职场文书
如何利用STAR法则制作留学文书?
2019/08/26 职场文书
python tkinter Entry控件的焦点移动操作
2021/05/22 Python
Java Socket实现多人聊天系统
2021/07/15 Java/Android
SONY600GR,国产收音机厂商永远的痛
2022/04/05 无线电
JS中forEach()、map()、every()、some()和filter()的用法
2022/05/11 Javascript