固定导航栏置顶效果HTML/CSS
固定导航栏的好处不用我多说了吧？尤其在页面内容比较长的时候，导航栏能一直贴在顶部，体验真是舒服。这个源码就是专门做这个事的，结构简单，样式也清晰，适合直接拿来用或者改着用。
导航的 HTML 结构基础，一个标签包着一堆，挺常见的套路。重点在 CSS 部分，用了position: fixed把导航栏固定在页面顶部，再配上top: 0、width: 100%，就搞定了。
要注意哦，固定定位是相对于浏览器窗口的，不是父元素。所以不管你怎么滚，导航都乖乖贴顶。配个z-index: 999，防止被别的东西遮住，就比较稳了。
有些细节你得注意下，比如老 IE（8 以下）对position: fixed支持不太好，要么用 JS 补一下，要么就放弃兼容了。移动端的话，记得加点@media样式，不然小屏幕上排版炸掉。
想加点花活？可以搞个scroll监听，滚动到哪个区域就高亮对应的导航，用户体验提升不止一点点。有兴趣的你，可以看看这个源码包，还挺好上手的。
如果你正好在做博客、产品页或者文档站，这种导航效果挺适合加上的，简单实用，还挺有范儿。
下载地址
用户评论
