toolbar 在顶部的时候,可以调用fix()方法来固顶。

固顶工具栏

拾图网淘宝店 shop490458729.taobao.com 创建于2006年3月,目前是国内最大的设计师素材平台。
拾图网淘宝店一直专注于提供网页素材下载,其内容涵盖网页素材,矢量素材,JS广告代码,小图片,网页背景,导航菜单,PNG图标等,让任何一个网页设计师都能轻松找到自己想要的素材!
自建站以来,拾图网淘宝店受到了设计师和站长的广泛喜爱,每天来本站找素材已经成为很多设计师的习惯,在不断的成长过程中,也得到各大知名网站的收录,包括Google,百度,hao123,2345等。
拾图网淘宝店PR7,Alexa世界排名为5332,中国网站排名638名左右,平均日访问量10万IP/100万PV左右。这些数据还在快步增长中,相信在不久的将来我们会有更大的成绩展现给大家!
懒得爬楼,于是人们发明了电梯;懒得去调电视机,于是有了遥控器;懒得去听音乐会,于是有了唱片,磁带和CD……历史证明,懒人总喜欢化繁为简,是懒人推动了人类的进步!
我们的使命:为设计师提供动力!

来源:GMU 代码整理:拾图网淘宝店 感谢:折页网

*尊重他人劳动成果,转载请自觉注明出处!注:此代码仅供学习交流,请勿用于商业用途。

手机移动端固定在顶部的导航栏代码,支持iOS,Android(暂不支持WP)等系统以webkit为内核的浏览器,建议在PC端使用以webkit为内核的浏览器(如:Google Chrome)中缩小浏览器窗口宽度查看效果,PC端查看效果需要用鼠标按住导航拖动以模拟手机上手指拖动的效果。


使用方法:

1.head区域引用样式文件reset.css,toolbar_demo.css,toolbar.css,toolbar.default.css,button.css,button.default.css,dropmenu.css,dropmenu.default.css

2.head区域引用JS文件zepto.js,zepto.extend.js,zepto.ui.js,zepto.highlight.js,zepto.fix.js,toolbar.js,button.js,dropmenu.js

3.在你的文件中加入<!-- 代码 开始 --><!-- 代码 结束 -->区域代码

4.本代码中两种导航效果均需引用所有CSS,JS文件,如需修改样式,可去掉default相关样式文件