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

三、滚动页的结构很简单，如下



四、要配置fullpage,js



我的配置内容如图，第一条 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会给菜单里的对应项加入active类，这样就好办了我们加一条css样式，给active类改变背景色

.active{background-color: #609F98;} 


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


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


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




声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com