APlayer 中文文档 下载 App

APlayer 吸底模式固定在页面底部

什么是吸底模式

吸底模式（fixed mode）让播放器脱离文档流，用 CSS position: fixed 固定在浏览器窗口的底部。无论用户如何滚动页面，播放器始终可见。这种模式在产品设计上很像网易云音乐网页版底部的播放条——随时在那里，不会因为页面滚动而消失。

启用吸底模式

只需要在初始化时设置 fixed: true：

const ap = new APlayer({
    container: document.getElementById('aplayer'),
    fixed: true,
    audio: [{
        name: '歌曲名称',
        artist: '艺术家',
        url: 'audio.mp3',
        cover: 'cover.jpg'
    }]
});

吸底模式与正常模式的区别

特性正常模式吸底模式
CSS 定位position: relative（在文档流内）position: fixed（脱离文档流）
随页面滚动会不会，始终贴窗口底部
页面占位占据容器空间，影响页面布局不占空间，可能遮挡底部内容
播放列表默认展示在播放器下方默认折叠，点击展开在播放器上方
适用场景内容区域内嵌展示全站常驻播放器

页面底部避让

吸底模式有一个常见问题：播放器会遮挡页面底部的内容。你需要给页面底部添加足够的 padding-bottom：

/* 给 body 或页面容器留出播放器高度 */
body {
    padding-bottom: 60px; /* APlayer 吸底模式大约占 40~60px */
}

如果你有固定在底部的导航栏、版权信息栏等元素，它们也会被播放器遮挡。需要根据实际布局调整。

常见布局方案

全站单实例

最常见的用法是在全站放一个吸底播放器，所有页面共享。这通常通过以下方式实现：

与页脚配合

如果你需要一个自定义的页脚，可以把吸底播放器放得"隐形"一些——只保留播放控制，把封面等元素做得较小：

const ap = new APlayer({
    container: document.getElementById('bottom-player'),
    fixed: true,
    theme: '#333',  // 深色主题融入深色页脚
    audio: [...]
});

与迷你模式的互斥

重要：fixed 和 mini 是互斥的——同时设置 fixed: true 和 mini: true 会导致不可预期的渲染结果。选择其中一种。

如果你需要"比吸底更精简"的效果，应该用吸底模式 + 自定义 CSS 来精简，而不是同时打开两个开关。

响应式注意事项

在移动端浏览器中，吸底模式可能会被浏览器自己的工具栏（iOS Safari 的地址栏、Android Chrome 的下载提示）遮挡。这是浏览器层面的限制，APlayer 无法自动避让。

常见的应对策略：