用CSS来实现置顶导航是一个不错的方法。它也是最直接、最轻量、最快速的方法。有三点需要注意： position、margin-top和z-index。将菜单的position设置为“fixed”，菜单将无法跟随页面的其他部分滚动。如果导航是水平方向的，可以不用设置margin属性。最后，在水平导航上，利用z-index属性保证导航始终居于其他元素的上面。当你滚动页面时，其他内容将在导航下滑动。

　　想了解更多内容请见W3C网站。

　　JQuery和JavaScript

　　图9：这个简单且精巧的置顶导航条由JavaScrpt实现

　　如果你更喜欢jQuery、JavaScript，你可以试试下面的方法：

　　● jScroll

　　● Simple Smart Sticky Navigation Bar

　　● jQuery Waypoints

　　● Sticky MenuBar

　　置顶导航的缺点

　　图10

　　设计局限性

　　采用置顶导航可能需要放弃一些设计选择，而这些可能是团队不愿放弃的。例如，水平置顶导航位于页面的顶部，其他元素的上面。虽然它很容易实现，但不一定是用户所需要的。

　　容易分心，受到打扰

　　一不小心，垂直导航就会让用户分心。在用户滚动页面时，一些置顶元素可能会出现延迟;其他元素可能太高(或太宽)，而影响对内容的访问。导航应该容易访问，同时不应抢夺内容的注意力。

　　对移动设备的兼容性

　　上文提到的CSS和JavaScript实现方法，在某些移动设备浏览器上并不提供支持。Luke Wroblewski的文章《Organizing Mobile》分享了在移动设备上创建导航需要重点注意的多项原则。响应式设计技术也为基于屏幕尺寸调整导航提供了一些解决方案。

　　要了解各个设备对它的支持情况。提前了解这些兼容性问题，可以节约更多时间。《When Can I Use?》文章中介绍了桌面和移动浏览器对CSS属性“position:fixed”的支持情况。Brad Frost也对此做了测试和分析，在他的视频中也提供了精彩的观点。

　　结论

　　作为设计者、开发者，我们为什么要不断迫使用户上下滚动页面来寻找导航呢?这在桌面软件上已不是问题，并且我们有一些数据可以显示置顶菜单的益处。在美国，访问量最高的25家网站中有84%可以通过置顶导航，来加速对用户的导航。

　　当然，置顶导航并不适用于任何情况，尤其在资源紧俏时。使用置顶导航需认真考虑，并保证网站的可用性和整体用户体验。

　　作者简介：

         Hyrum Denney，专注于Web设计和开发。现就职于SirsiDynix，担任UX/UI设计师。曾创办自己的UX工作室，同时在电子商务行业担任网络运营主管。热衷于学习新知识，对用户体验设计、用户使用网站的心理学有着特殊的兴趣爱好。

　　原文链接：Sticky Menus Are Quicker To Navigate