移动端导航栏的粘性定位可以让导航在页面滚动到特定位置时固定在顶部，方便用户随时切换功能，无需反复滚动回页面顶部。纯CSS实现该效果不需要依赖JavaScript逻辑，能减少页面脚本体积，降低性能消耗。
粘性定位的基础原理
CSS的position: sticky属性是粘性定位的核心，它结合了相对定位和固定定位的特点。元素在滚动到设定的阈值之前表现为相对定位，到达阈值后则表现为固定定位，阈值通过top、bottom、left、right属性设置。
需要注意的是，粘性定位的生效依赖父元素的滚动容器，如果父元素设置了overflow: hidden、overflow: auto等属性，可能会导致粘性定位失效。
移动端场景下的常见问题
- 部分低版本移动端浏览器对
position: sticky的兼容性不足，需要做兼容处理 - 导航栏固定后可能被页面其他元素遮挡，需要设置合理的层级
- 不同移动端设备的视口宽度不同，需要确保导航栏宽度适配
- 导航栏固定后可能和页面顶部状态栏重叠，需要调整偏移量
纯CSS实现方案
基础兼容写法
首先针对支持粘性定位的浏览器使用标准属性，再针对不支持的浏览器做降级处理，使用position: fixed作为替代，同时通过媒体查询适配移动端场景。
/* 导航栏基础样式 */
.mobile-nav {
width: 100%;
height: 50px;
background-color: #ffffff;
display: flex;
align-items: center;
justify-content: space-around;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
/* 粘性定位核心属性，距离顶部0px时固定 */
position: -webkit-sticky; /* Safari浏览器前缀兼容 */
position: sticky;
top: 0;
z-index: 999; /* 确保导航栏在其他元素上方 */
}
/* 导航项样式 */
.nav-item {
font-size: 14px;
color: #333333;
text-decoration: none;
padding: 0 10px;
}
/* 低版本浏览器降级处理，不支持sticky时使用fixed */
@supports not (position: sticky) {
.mobile-nav {
position: fixed;
top: 0;
left: 0;
}
/* 给页面主体添加上边距，避免内容被导航栏遮挡 */
.page-content {
padding-top: 50px;
}
}
/* 移动端适配，确保导航栏宽度占满视口 */
@media screen and (max-width: 768px) {
.mobile-nav {
width: 100vw;
}
}
适配顶部状态栏的优化
部分移动端浏览器顶部有状态栏，导航栏固定后可能会和状态栏重叠，此时可以调整top属性的值，或者给导航栏添加上内边距。
/* 适配有状态栏的移动端场景，调整top值 */
@supports (padding-top: env(safe-area-inset-top)) {
.mobile-nav {
top: env(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
}
}
完整HTML结构示例
以下是配合上述CSS的完整HTML结构，注意HTML标签的写法需要符合转义规则。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>移动端粘性导航栏</title>
<style>
/* 此处放入上述CSS代码 */
</style>
</head>
<body>
<nav class="mobile-nav">
<a href="#" class="nav-item">首页</a>
<a href="#" class="nav-item">分类</a>
<a href="#" class="nav-item">购物车</a>
<a href="#" class="nav-item">我的</a>
</nav>
<div class="page-content">
<p>页面内容区域，此处可以放置长文本、图片等内容，用于测试滚动时导航栏的粘性效果。</p>
<p>添加足够多的内容让页面出现滚动条，即可看到导航栏在滚动到顶部时固定的效果。</p>
<p>重复添加内容段落，模拟真实移动端页面的长度。</p>
<p>重复添加内容段落，模拟真实移动端页面的长度。</p>
<p>重复添加内容段落，模拟真实移动端页面的长度。</p>
<p>重复添加内容段落，模拟真实移动端页面的长度。</p>
<p>重复添加内容段落，模拟真实移动端页面的长度。</p>
<p>重复添加内容段落，模拟真实移动端页面的长度。</p>
<p>重复添加内容段落，模拟真实移动端页面的长度。</p>
<p>重复添加内容段落，模拟真实移动端页面的长度。</p>
</div>
</body>
</html>
效果验证与注意事项
实现完成后可以在不同移动端设备上测试效果，重点验证以下场景：
- 页面向上滚动时，导航栏是否在到达顶部后固定
- 页面向下滚动时，导航栏是否恢复原有位置
- 导航栏是否没有被其他元素遮挡
- 不同宽度移动端设备下导航栏是否适配
如果测试时发现粘性定位失效，可以检查父元素是否设置了overflow相关属性，或者浏览器是否支持position: sticky属性，按照上述兼容方案调整即可。