position: sticky 是 relative 与 fixed 的结合，元素滚动到阈值（如 top: 0）时固定，常与 media query 结合实现响应式粘性布局。桌面端可保持导航栏固定提升浏览效率，移动端通过 @media (max-width: 768px) 设置 position: static 关闭粘性，避免遮挡内容或影响操作；反之也可仅在大屏启用 sticky，如侧边栏在 min-width: 1024px 时生效。使用时需注意父容器不能有 overflow: hidden 或 overflow: auto，否则 sticky 失效，且 iOS Safari 可能存在兼容问题，建议真实设备测试。合理结合 media query 控制 sticky 状态，能使布局更灵活，提升多设备用户体验。
在现代网页设计中，position: sticky 和 media query 经常被结合使用，以实现响应式场景下的智能粘性布局。比如导航栏在桌面端保持固定，而在移动端小屏幕中取消粘性效果，避免遮挡内容或影响操作体验。
什么是 position: sticky？
sticky 定位是 relative 和 fixed 的结合体。元素在滚动到特定阈值前表现为相对定位，到达设定的阈值（如 top: 0）后则表现为固定定位，直到其父容器脱离视口。
基本语法：.sticky-element {
position: sticky;
top: 0;
}为什么需要与 media query 结合？
不同设备的屏幕尺寸和交互方式差异大。在桌面端适合固定的头部或侧边栏，在手机上可能造成布局错乱或误触。通过媒体查询可以按需开启或关闭 sticky 效果。
- 在大屏设备启用 sticky 导航，提升浏览效率
- 在小屏设备禁用 sticky，节省空间或适配手势操作
- 根据设备方向（横屏/竖屏）调整粘性行为
如何结合使用示例
以下是一个典型的响应式导航栏设置：桌面端固定顶部，移动端恢复为普通滚动元素。
立即学习“前端免费学习笔记（深入）”；
.navbar {
position: sticky;
top: 0;
background: white;
z-index: 100;
}
<p>@media (max-width: 768px) {
.navbar {
position: static; /<em> 关闭 sticky </em>/
}
}当屏幕宽度小于等于 768px 时，导航栏不再粘附于顶部，随页面正常滚动。
基于Bootstrap支持移动端的响应式轮播图效果
下载
bootstrap-carousel-touch-slider是一款基于Bootstrap支持移动端的响应式轮播图效果。该轮播图特效可以使用手指进行滑动切换。并且它和animate.css结合，可以制作出各种炫酷的文字动画效果。 使用方法 在页面中引入bootstrap相关文件，font-awesome.css字体图标文件，animate.min.css动画文件，以及jquery.touchS
也可以反过来：只在特定条件下启用 sticky：
.sidebar {
position: static;
}
<p>@media (min-width: 1024px) {
.sidebar {
position: sticky;
top: 20px;
}
}这样侧边栏仅在宽屏设备中具备粘性滚动效果。
注意事项与兼容性
虽然 sticky 定位已被主流浏览器广泛支持，但仍需注意：
- 父元素不能有 overflow: hidden 或 overflow: auto，否则 sticky 可能失效
- 确保父容器高度不会限制 sticky 元素的滚动范围
- 在 iOS Safari 中，sticky 有时表现异常，建议测试真实设备
- 配合 transform、flexbox 或 grid 使用时需留意渲染行为
基本上就这些。合理利用 media query 控制 sticky 的启用状态，能让响应式设计更灵活、用户体验更自然。关键是在不同设备上做出取舍，而不是让所有功能无差别存在。
