蝉知系统如何设置导航条固定在顶部
- 2016-09-07 10:44:00
- GavinHsueh 原创
- 3169
对于页面比较长的网站,我们在下拉滚动条时,如果要跳转其他页面板块,又得回到网站顶部找导航条,操作不便。为了提高用户体验度,我们经常采取的解决方案就是将导航条不定在顶部,方便用户快捷浏览网站各个板块。
那 蝉知系统是如何将导航条固定在网站顶部的呢,这里我提供了两种解决方案:
1.使用“class=" navbar-fixed-top"”样式。
蝉知系统采用基于Bootstrap开发的ZUI前端框架,继而我们可以直接对导航条元素添加 navbar-fixed-top样式,从而达到导航条固定在顶部的效果。
2.使用CSS/JS实现。
//设置导航条固定在顶部 $(function(){ var nav=$("#navbar"); //得到导航对象,设立改成你自己的网站导航标签,蝉知为#navbar var win=$(window); var sc=$(document); win.scroll(function(){ if(sc.scrollTop()>=200){ //这里的200指导航上移指定距离后固定在顶部 nav.addClass("fixednav"); $(".navTmp").fadeIn(); }else{ nav.removeClass("fixednav"); $(".navTmp").fadeOut(); } }) })然后CSS里添加下面样式:
.fixednav { position: fixed; top: 0px; width:1140px; z-index: 1; }
宽度根据实际情况自行设定。
如果大家还有其他实现方法,欢迎一起分享讨论。
下载提示
蝉知使用问题交流,请加 官方QQ群: 284891062 , 加群请注明暗号: 蝉知。
评论列表
屌丝男神
2017-02-14 13:14:22
对于小白来说,你这不靠谱啊,都没有详细步凑
蝉知-褚纪鲁
2017-02-14 13:35:58
后台--设计--界面--代码--全部页面--css
1/1
发表评论
文章分类