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 相关文章推荐
javascript自动改变文字大小和颜色的效果的小例子
Aug 02 Javascript
jquery 实现密码框的显示与隐藏示例代码
Sep 18 Javascript
JavaScript?Apple设备检测示例代码
Nov 15 Javascript
JavaScript中使用Object.create()创建对象介绍
Dec 30 Javascript
jquery实现简洁文件上传表单样式
Nov 02 Javascript
深入解析AngularJS框架中$scope的作用与生命周期
Mar 05 Javascript
js阻止移动端页面滚动的两种方法
Jan 25 Javascript
JS实现含有中文字符串的友好截取功能分析
Mar 13 Javascript
微信小程序 获取手机号 JavaScript解密示例代码详解
May 14 Javascript
详解JavaScript之Array.reduce源码解读
Nov 01 Javascript
原生js实现自定义消息提示框
Nov 19 Javascript
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
Apr 24 Vue.js
基于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 include加载文件两种方式效率比较
2010/08/08 PHP
php使用curl获取header检测开启GZip压缩的方法
2018/08/15 PHP
URL编码转换,escape() encodeURI() encodeURIComponent()
2006/12/27 Javascript
JavaScript 异步调用框架 (Part 2 - 用例设计)
2009/08/03 Javascript
ExtJS[Desktop]实现图标换行示例代码
2013/11/17 Javascript
JS显示日历和天气的方法
2016/03/01 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
2016/05/09 Javascript
JavaScript String 对象常用方法详解
2016/05/13 Javascript
canvas实现钟表效果
2017/02/13 Javascript
javascript实现QQ空间相册展示源码
2017/12/12 Javascript
vue 实现剪裁图片并上传服务器功能
2018/03/01 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
2020/08/21 Javascript
js中的数组对象排序分析
2018/12/11 Javascript
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
2019/01/19 Javascript
layui点击数据表格添加或删除一行的例子
2019/09/12 Javascript
利用js实现简易红绿灯
2020/10/15 Javascript
微信小程序绘制半圆(弧形)进度条
2020/11/18 Javascript
[01:13:51]TNC vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
numpy自动生成数组详解
2017/12/15 Python
Python实现PS图像调整颜色梯度效果示例
2018/01/25 Python
Python如何发布程序的详细教程
2018/10/09 Python
python3 dict ndarray 存成json,并保留原数据精度的实例
2019/12/06 Python
jupyter实现重新加载模块
2020/04/16 Python
Pythonic版二分查找实现过程原理解析
2020/08/11 Python
Python 删除List元素的三种方法remove、pop、del
2020/11/16 Python
python读写数据读写csv文件(pandas用法)
2020/12/14 Python
英国经典球衣网站:Classic Football Shirts
2017/05/20 全球购物
您附近的水疗和健康场所:Spafinder(美国)
2019/07/05 全球购物
培训讲师邀请函
2014/01/10 职场文书
公务员政审单位鉴定材料
2014/05/16 职场文书
乡镇食品安全责任书
2014/07/28 职场文书
办理信用卡收入证明范例
2014/09/13 职场文书
高校教师个人工作总结2014
2014/12/17 职场文书
文明单位创建材料
2014/12/24 职场文书
廉洁自律承诺书2015
2015/01/22 职场文书
SQL中的连接查询详解
2022/06/21 SQL Server