如何把网站导航栏固定在页面顶部不随滚动消失？
订阅
很多用户在浏览网站时会发现：页面向下滚动后，顶部导航栏就看不到了，返回首页或切换栏目变得不方便。通过给导航栏添加固定定位样式，可以让导航栏始终停留在浏览器顶部。
当导航栏没有设置固定定位时，它会随着页面内容一起滚动。一旦页面内容较长，导航栏就会被“推走”。解决这个问题的方式不是改页面结构，而是在网页编辑器中为导航栏添加一段 CSS 样式代码，让它固定在顶部显示。
进入网页编辑器后，先在编辑器顶部找到“编辑”入口，确保当前页面处于可编辑状态，这一步是为了能够对当前页面的样式进行调整，在左侧设置面板中，点击“基础信息”，然后在该区域内找到“编写代码”相关选项，这是页面允许添加自定义样式的位置。
接着，将视线移到页面右上角的工具区域，点击带有“</>”样式的代码按钮，系统会弹出一个“输入自定义 CSS 代码（仅支持样式，不支持 JavaScript）”的窗口，在弹出的 CSS 代码输入框中，粘贴以下样式代码：
确认代码输入完成后，点击弹窗底部的“保存”按钮，使样式生效，然后在编辑器右上角依次点击“保存”和“发布”，让固定导航栏的效果同步到正式网站。
注意事项：
1、如果固定后页面内容被导航栏遮挡，说明顶部需要预留高度，可以在页面主体区域增加 padding-top，数值与导航栏高度一致。
2、如果导航栏在部分模块下方显示，说明 z-index 不够大，可以适当调高，比如 z-index: 99 或 999。
3、固定导航栏是纯样式调整，不会影响网站原有功能或内容。
阅读全文
请先 登录后发表评论 ~