新闻中心

thinksaas如何固定顶部导航栏

作者 / 无忧主机时间 2017-06-21 18:19:37

thinksaas是一款很受欢迎的源码，在thinksaas的默认模板中,首页在往下滚动时顶部的导航栏是随之滚动的,而我们经常访问的一些网站像新浪微博,在往下滚动时他的顶部是固定不动的。为了提升网站的体验度，我们也可以将自己的thinksaas网站设置成这种效果。无忧主机小编教您三分钟学会thinksaas导航栏的固定。在没有设置固定导航栏的效果如图1所示：设置顶部导航栏为固定的方法非常简单，只需要两句代码就可以完成。找到顶部导航栏的层叠样式表文件，在源代码中可以看到该导航栏的css文件是在theme/sample下的base.css文件中，找到该文件后用文本编辑器打开： 1、找到.header{}，在大括号里面添加 position:fixed;z-index:999999; 修改前后对比：修改前

.header {
	background: #49a5de;
	width: 100%;
	border-radius: 0px;
	margin:0;
}

修改后

.header {
	position:fixed;
	z-index:999999;
	background: #49a5de;
	width: 100%;
	border-radius: 0px;
	margin:0;
}

如图2所示，完成此步骤后就实现了对顶部导航栏的固定。

2、固定了顶部导航栏这个层，会导致下一个层被挡住的现象，当再次访问首页时，会发现下面一个导航标签栏已经被顶部导航栏遮住了，如图3所示。

这时需要设置下面这个层的属性，同样是在这个base.css文件，找到.appnav{}，把里面的padding: 0;改为padding:40px 0px 0px 0px; 如图4所示，

修改前后对比：修改前

.appnav {
	width: 100%;
	margin: 0 auto;
	padding:0;
	overflow: hidden;
	background: #fafafa;
	border-bottom: solid 1px #eee;
	margin-bottom: 10px;
}

修改后：

.appnav {
	width: 100%;
	margin: 0 auto;
	padding:40px 0px 0px 0px;
	overflow: hidden;
	background: #fafafa;
	border-bottom: solid 1px #eee;
	margin-bottom: 10px;
}