蝉知系统如何设置导航条固定在顶部

2016-09-07 10:44:00

GavinHsueh

原创

1844

摘要：对于页面比较长的网站，我们在下拉滚动条时，如果要跳转其他页面板块，又得回到网站顶部找导航条，操作不便。为了提高用户体验度，我们经常采取的解决方案就是将导航条不定在顶部，方便用户快捷浏览网站各个板块。

对于页面比较长的网站，我们在下拉滚动条时，如果要跳转其他页面板块，又得回到网站顶部找导航条，操作不便。为了提高用户体验度，我们经常采取的解决方案就是将导航条不定在顶部，方便用户快捷浏览网站各个板块。

那蝉知系统是如何将导航条固定在网站顶部的呢，这里我提供了两种解决方案：

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 ， 加群请注明暗号： 蝉知。

蝉知使用问题交流，请加官方QQ群： 284891062 ，加群请注明暗号：蝉知。