底部固定悬浮条必须用 position: fixed 实现，配合 bottom: 0、left: 0、right: 0、z-index 和 box-sizing: border-box；走马灯用 CSS animation + flex 实现，需重复内容至少3份并匀速滚动；滚动到底部时用 JS 节流判断并暂停动画；IE11 需降级为 left 位移或静态显示。
底部固定悬浮条用 position: fixed 实现
要让条始终贴在视口最下方、不随滚动消失，position: fixed 是唯一可靠方案。绝对定位（position: absolute）会随父容器滚动而移位，不能满足“悬浮”需求。
关键点：bottom: 0 + left: 0 + right: 0 控制宽度铺满，同时设置 z-index 避免被其他元素遮挡。别忘了加 box-sizing: border-box，否则 padding 可能撑出横向滚动条。
- 高度建议用固定值（如
height: 48px），避免内容撑开导致跳动 - 若需兼容 iOS Safari，加上
-webkit-backface-visibility: hidden减少渲染闪烁 - 不要给父容器设
overflow: hidden，否则 fixed 元素可能被意外裁剪
走马灯效果用 CSS animation + flex 实现最稳
不用 JS 轮播库也能做出平滑循环滚动，核心是用 @keyframes 移动 transform: translateX()，配合 display: flex 让子项水平排列并无限拼接。
常见翻车点：只复制一次内容导致衔接处有空白或卡顿。正确做法是至少重复 3 份（前中后），动画位移距离 = 单项宽度 × 1，总时长控制在 10–20s 之间，用 linear 动画函数保证匀速。
立即学习“前端免费学习笔记（深入）”；
- 示例关键帧：
@keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } - 容器设
white-space: nowrap防止文字换行破坏布局 - 子项用
flex-shrink: 0防止被 flex 压缩变形
滚动到页面底部时走马灯自动暂停
纯 CSS 无法监听滚动位置，必须用 JS 判断 window.scrollY + window.innerHeight >= document.body.scrollHeight。满足条件就给走马灯容器加 animation-play-state: paused。
注意节流——别在 scroll 事件里直接写判断逻辑，用 requestAnimationFrame 或简单时间戳过滤（如间隔 60ms 执行一次）。否则低端机容易掉帧甚至卡死。
- 暂停/恢复状态建议用 class 切换（如
.is-paused），比内联 style 更易维护 - 移动端 touchmove 也要监听，iOS 滚动惯性可能导致 scroll 事件延迟触发
- 如果底部条本身有高度，计算临界点时记得减去它的
offsetHeight
IE11 兼容需降级处理 animation 和 flex
IE11 支持 flex 但对 transform: translateX() 动画支持不完整，且不识别 animation-play-state。真要兼容，得准备两套逻辑：
- CSS 侧：用
-ms-flexbox前缀 +left替代transform做位移（性能差但可用） - JS 侧：改用
setInterval+ 修改element.style.left模拟滚动，手动控制启停 - 更现实的做法是加 UA 判断，对 IE11 直接禁用动画，显示静态单行文本
现在多数项目已放弃 IE11，但如果客户明确要求，这些降级点一个都不能漏。
