新聞中心

thinksaas如何固定頂部導(dǎo)航欄

作者 / 無憂主機(jī) 時間 2017-06-21 18:19:37

thinksaas是一款很受歡迎的源碼，在thinksaas的默認(rèn)模板中,首頁在往下滾動時頂部的導(dǎo)航欄是隨之滾動的,而我們經(jīng)常訪問的一些網(wǎng)站像新浪微博,在往下滾動時他的頂部是固定不動的。為了提升網(wǎng)站的體驗(yàn)度，我們也可以將自己的thinksaas網(wǎng)站設(shè)置成這種效果。無憂主機(jī)小編教您三分鐘學(xué)會thinksaas導(dǎo)航欄的固定。在沒有設(shè)置固定導(dǎo)航欄的效果如圖1所示：設(shè)置頂部導(dǎo)航欄為固定的方法非常簡單，只需要兩句代碼就可以完成。找到頂部導(dǎo)航欄的層疊樣式表文件，在源代碼中可以看到該導(dǎo)航欄的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所示，完成此步驟后就實(shí)現(xiàn)了對頂部導(dǎo)航欄的固定。

2、固定了頂部導(dǎo)航欄這個層，會導(dǎo)致下一個層被擋住的現(xiàn)象，當(dāng)再次訪問首頁時，會發(fā)現(xiàn)下面一個導(dǎo)航標(biāo)簽欄已經(jīng)被頂部導(dǎo)航欄遮住了，如圖3所示。

這時需要設(shè)置下面這個層的屬性，同樣是在這個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;
}