香港独立IP空间
香港php空间
美国php空间
域名注册

thinksaas是一款很受欢迎的源码,在thinksaas的默认模板中,首页在往下滚动时顶部的导航栏是随之滚动的,而我们经常访问的一些网站像新浪微博,在往下滚动时他的顶部是固定不动的。为了提升网站的体验度,我们也可以将自己的thinksaas网站设置成这种效果。无忧主机小编教您三分钟学会thinksaas导航栏的固定。
在没有设置固定导航栏的效果如图1所示:

图12 300x132 thinksaas如何固定顶部导航栏
设置顶部导航栏为固定的方法非常简单,只需要两句代码就可以完成。找到顶部导航栏的层叠样式表文件,在源代码中可以看到该导航栏的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所示,完成此步骤后就实现了对顶部导航栏的固定。

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

图31 300x50 thinksaas如何固定顶部导航栏

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

图41 300x64 thinksaas如何固定顶部导航栏

修改前后对比:

修改前

.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;
}

图5 300x101 thinksaas如何固定顶部导航栏

保存后再次浏览网页发现刚才的出现的异常消失了,如图5所示,thinksaas的固定导航栏就设置好了。

 

本文地址:http://www.51php.com/thinkphp/25100.html

喜欢本文或觉得本文对您有帮助,请分享给您的朋友 ^_^

阅读本文的人还阅读: