CSS怎么實現導航固定的、左右滑動的滾動條

這篇文章主要介紹了CSS怎么實現導航固定的、左右滑動的滾動條，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

如上效果的導航，導航是固定在頂部的，可以左右滑動點擊更多選項的。

這種制作相當簡單，本文只是提幾點注意：

固定位置

菜單固定在頂部不動，使用 position:fixed; top:0; left:0;。同時要注意：

• 下面列表下移相應的位置，否則打開頁面時，下方列表會被遮住一部分。

• 為菜單設置背景，否則透明的話，與下面列表滾動上來的內容會重疊顯示。

• 為 body 設置背景，因為微信瀏覽器默認有個背景色（不是白色），可能會與我們的效果沖突，按需設置背景。

使用 table

通常我們使用 ul、li 作 float，但是當一行顯示不下時，要讓它不落到第二行的話，比較麻煩，所以我們推薦使用 table。

以下是整個 CSS 代碼，其中 .wrapper 是外層，.nav、.list 是兄弟。

body, .wrapper 
{ 
background:#fff; 
}

.nav 
{ 
position:fixed; 
top:0;
 left:0; padding:0; 
width:100%; 
height:60px; 
overflow-x:scroll; 
background:#fff; 
}
.nav table 
{ 
width:720px;
 border-collapse:collapse;
 }
.nav table td 
{
 padding-top:10px; 
padding-bottom:10px; 
width:80px; 
text-align:center; 
}
.nav table td a 
{ 
line-height:40px; 
font-size:14px; 
font-weight:bold; 
}
.nav table td.cur a 
{ 
box-sizing:border-box; 
border-bottom:2px solid #f07515; color:#f07515; 
}

.list 
{ 
margin-top:60px; 
}

動態限定寬度

上面 CSS 代碼為 table 設置了 720px，即 9 個 td 的寬度，通常我們菜單數量是固定的，所以直接這么設置，但是如果不固定的話，可以利用程序來動態設置，比如 JavaScript 設置方法：

$(".header table").width($(".header table td").length * $(".header table td").width());

選中后面的菜單項時，顯示后面的菜單項

對于非 Ajax 頁面，點擊后面的菜單頁時，頁面刷新，然后顯示最左邊的幾個菜單項，我們可以利用 JavaScript 滾動菜單項，使當前選中項顯示出來，示例代碼如下：

var count = 0;
$(".header table td").each(function () {
	if ($(this).hasClass("cur")) {
		return false;
	}
	count++;
});
if (count >= 3) { // 選中前面幾個時不滾動
	count -= 2; // 不必滾到最左邊
	$(".header").get(0).scrollLeft = count * $(".header table td").width();
}

感謝你能夠認真閱讀完這篇文章，希望小編分享的“CSS怎么實現導航固定的、左右滑動的滾動條”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!