FullPage.js 是一个简单而易于使用的插件，用来创建全屏滚动网站（也被称为单页网站）。除了可以创建全屏滚动效果以外，也可以给网站添加一些水平的滑块效果。能够自适应不同的屏幕尺寸，包括平板电脑和移动设备。 开始制作自己的个人简历啦，决定要使用固定导航栏，又打算使用fullpage.js做全屏滚动。 仔细看了fullpage文档之后，发现不用额外写js代码就可以实现以下效果： [img]http://files.jb51.net/file_images/article/201603/201603170923331.gif[/img] 1.当滚动翻页时，导航栏也自动定位到这一页的标签 2.当然点击标签时，也是滚动到那一页而不是直接跳转的。 [b]一、准备工作肯定是要先导入fullpage.js啦；[/b] 官网是[url=https://github.com/alvarotrigo/fullPage.js]https://github.com/alvarotrigo/fullPage.js[/url] fullpage是基于jquery的，所以要记得导入jquery哦。 [b]二、导航栏结构[/b] 上面导航栏的结构是这样的，其中的data-menuanchor就是fullpage要求的，a便签的href属性也要相对应的值咯。 [b]三、滚动页的结构很简单，如下[/b] [b]四、要配置fullpage,js[/b] 我的配置内容如图，第一条 paddingTop: '50px'，是为了给固定导航栏腾出空间 第二条：anchors,这个是依次给滚动页设置锚点，注意这里需要和导航栏里的li标签的data-menuanchor属性以及a的href属性对应。 第三条：就是绑定菜单，也就是上面的导航栏。 更多配置项参考这里：[url=https://github.com/Niefee/My-study-records/blob/master/2016/1/2016%E5%B9%B41%E6%9C%8818%E6%97%A5.markdown]https://github.com/Niefee/My-study-records/blob/master/2016/1/2016%E5%B9%B41%E6%9C%8818%E6%97%A5.markdown[/url] [b]五、增加active类的样式[/b] 这样，fullpage就配置好了，但是导航栏的样式还不能根据页面变化我们先查看一下控制台 [img]http://files.jb51.net/file_images/article/201603/201603170923332.gif[/img] 当页面滚动时，fullpage.js会给菜单里的对应项加入active类，这样就好办了我们加一条css样式，给active类改变背景色 .active{background-color: #609F98;} 这样，所有的效果就实现啦 PS:潜在的小bug，因为fullpage会在当前滚动页也加入active类，也就意味着这个css样式会影响该页的背景颜色（还好我用的背景图，不受影响，机智如我，哈哈），我猜想要解决的话，那可能要给section类加背景颜色，再加个!important吧。 好了，关于Fullpage.js固定导航栏-实现定位导航栏的相关内容就给大家介绍到这里，希望对大家有所帮助！