CSS實現(xiàn)導航固定的、左右滑動的滾動條制作方法
發(fā)布時間：2020-06-29 11:18:36 作者：千一網(wǎng)絡(luò) 
我要評論
我要評論這篇文章主要介紹了CSS實現(xiàn)導航固定的、左右滑動的滾動條制作方法,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
如上效果的導航，導航是固定在頂部的，可以左右滑動點擊更多選項的。
這種制作相當簡單，本文只是提幾點注意：
固定位置
菜單固定在頂部不動，使用 position:fixed; top:0; left:0;。同時要注意：
- 下面列表下移相應的位置，否則打開頁面時，下方列表會被遮住一部分。
- 為菜單設(shè)置背景，否則透明的話，與下面列表滾動上來的內(nèi)容會重疊顯示。
- 為 body 設(shè)置背景，因為微信瀏覽器默認有個背景色（不是白色），可能會與我們的效果沖突，按需設(shè)置背景。
使用 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;
}
動態(tài)限定寬度
上面 CSS 代碼為 table 設(shè)置了 720px，即 9 個 td 的寬度，通常我們菜單數(shù)量是固定的，所以直接這么設(shè)置，但是如果不固定的話，可以利用程序來動態(tài)設(shè)置，比如 JavaScript 設(shè)置方法：
$(".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();
}
總結(jié)
到此這篇關(guān)于CSS實現(xiàn)導航固定的、左右滑動的滾動條制作方法的文章就介紹到這了,更多相關(guān)css 導航固定左右滑動滾動條內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
css實現(xiàn)隱藏滾動條并可以滾動內(nèi)容的實例代碼
這篇文章主要介紹了css實現(xiàn)隱藏滾動條并可以滾動內(nèi)容的實例代碼,代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-11-03CSS3自定義滾動條樣式 ::webkit-scrollbar的示例代碼詳解
這篇文章主要介紹了CSS3自定義滾動條樣式 ::webkit-scrollbar的示例代碼，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可2020-06-01CSS實現(xiàn)隱藏滾動條并可以滾動內(nèi)容效果(三種方式)
今天小編給大家分享3種方法實現(xiàn)CSS隱藏滾動條并可以滾動內(nèi)容，我已經(jīng)在很多地方使用了非常不錯，需要的朋友參考下吧2020-03-25- 這篇文章主要介紹了css滾動條樣式修改的代碼,需要的朋友可以參考下2019-10-30
- 這篇文章主要介紹了css3 實現(xiàn)滾動條美化效果的實例代碼,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-01-06
