CSS实现导航固定的、左右滑动的滚动条制作方法

如上效果的导航，导航是固定在顶部的，可以左右滑动点击更多选项的。 这种制作相当简单，本文只是提几点注意： 固定位置 菜单固定在顶部不动，使用 position:fixed; top:0; left:0;。同时要注意： 下面列表下移相应的位置，否则打开页面时，下方列表会被遮住一部分。 为菜单设置背景，否则透明的话，与下面列表滚动上来的内容会重叠显示。 为 body 设置背景，因为微信浏览器默认有个背景色（不是白色），可能会与我们的效果冲突，按需设置背景。 使用 table 通常我们使用 ul、li 作 float，但是当一行显示不下时，要让它不落到第二行的话，比较麻烦，所 在网页设计中，创建一个固定在顶部且支持左右滑动的导航栏是一个常见的需求，尤其在移动设备上，这样的设计可以有效地节省屏幕空间并提供良好的用户体验。本文将详细讲解如何使用CSS来实现这一功能。 为了实现固定位置的导航栏，我们需要使用CSS的`position: fixed`属性。将导航栏的CSS样式设置为： ```css .nav { position: fixed; top: 0; left: 0; width: 100%; height: 60px; /* 自定义高度 */ overflow-x: scroll; /* 允许水平滚动 */ background-color: #fff; /* 设置背景颜色 */ } ``` 这里的`position: fixed`使得导航栏始终固定在屏幕的顶部，而`top: 0; left: 0;`确保它位于左上角。`overflow-x: scroll;`是关键，它允许导航栏内容水平滚动，但不允许垂直滚动。 由于导航栏被固定，可能会遮挡住下方的内容，因此需要将下面的内容（例如列表）下移以避免被遮挡。可以通过给主体内容区域添加CSS样式来实现： ```css .list { margin-top: 60px; /* 导航栏高度 */ } ``` 导航栏通常包含多个链接或菜单项，这里推荐使用`table`布局，因为它在处理水平排列的元素时更为简便。CSS代码如下： ```css .nav table { width: 720px; /* 预设宽度，可根据实际需求调整 */ border-collapse: collapse; } .nav table td { padding: 10px 0; 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; } ``` 如果菜单项的数量是动态的，可以使用JavaScript根据实际的`td`数量动态设置`table`的宽度。例如： ```javascript $(".header table").width($(".header table td").length * $(".header table td").width()); ``` 当用户点击后面菜单项时，由于页面刷新，导航栏可能滚动到最左边，显示第一个菜单项。为了避免这种情况，可以使用JavaScript来定位当前选中的菜单项： ```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的`position: fixed`，`overflow-x: scroll`以及适当的布局和JavaScript辅助，可以轻松创建一个固定在顶部、支持左右滑动的导航栏。这种方法既保持了页面布局的整洁，又能适应不同屏幕尺寸和菜单数量的变化。在实际应用中，可以根据项目需求进行微调和优化。