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 29 Javascript
jquery统计输入文字的个数并对其进行判断
Jan 07 Javascript
JQuery实现图片轮播效果
Sep 15 Javascript
Spring mvc 接收json对象
Dec 10 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
Jan 28 Javascript
JavaScript Date对象详解
Mar 01 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
Nov 22 Javascript
vue初始化动画加载的实例
Sep 01 Javascript
Bootstrap 实现表格样式、表单布局的实例代码
Dec 09 Javascript
Vue Router history模式的配置方法及其原理
May 30 Javascript
微信小程序获取用户绑定手机号方法示例
Jul 21 Javascript
使用Vue Composition API写出清晰、可扩展的表单实现
Jun 10 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/10/07 PHP
利用浏览器的Javascript控制台调试PHP程序
2014/01/08 PHP
简单谈谈php延迟静态绑定
2016/01/26 PHP
PHP标准类(stdclass)用法示例
2016/09/28 PHP
CI框架(CodeIgniter)操作redis的方法详解
2018/01/25 PHP
Mac下快速搭建PHP开发环境步骤详解
2019/05/05 PHP
浅析offsetLeft,Left,clientLeft之间的区别
2013/11/30 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
2016/05/18 Javascript
AngularJS ng-controller 指令简单实例
2016/08/01 Javascript
js canvas仿支付宝芝麻信用分仪表盘
2016/11/16 Javascript
Three.js实现浏览器变动时进行自适应的方法
2017/09/26 Javascript
帝国cms首页列表页实现点赞功能
2017/10/30 Javascript
手把手教你写一个微信小程序(推荐)
2018/10/17 Javascript
el-select 下拉框多选实现全选的实现
2019/08/02 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
2020/06/05 Javascript
jdk1.8+vue elementui实现多级菜单功能
2020/09/24 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
2020/11/03 Javascript
vue实现抽屉弹窗效果
2020/11/15 Javascript
python操作mongodb根据_id查询数据的实现方法
2015/05/20 Python
实例讲解Python中函数的调用与定义
2016/03/14 Python
python3.4+pycharm 环境安装及使用方法
2019/06/13 Python
用Python 爬取猫眼电影数据分析《无名之辈》
2020/07/24 Python
详解如何在pyqt中通过OpenCV实现对窗口的透视变换
2020/09/20 Python
Python 实现国产SM3加密算法的示例代码
2020/09/21 Python
Python之Sklearn使用入门教程
2021/02/19 Python
Python制作运行进度条的实现效果(代码运行不无聊)
2021/02/24 Python
市场部规章制度
2014/01/24 职场文书
班级出游活动计划书
2014/08/15 职场文书
新教师培训心得体会
2014/09/02 职场文书
2015年保险公司工作总结
2015/04/24 职场文书
廉政承诺书范文
2015/04/28 职场文书
小兵张嘎电影观后感
2015/06/03 职场文书
有关花店创业的计划书模板
2019/08/27 职场文书
Go 语言结构实例分析
2021/07/04 Golang
vue中div禁止点击事件的实现
2022/04/02 Vue.js
table不让td文字溢出操作方法
2022/12/24 HTML / CSS