如何将Squarespace的announcement bar设置为网站头部

代码注入失效核心原因排查 #

• 必须先在后台开启公告栏功能：路径为「网站」→「网站工具」→「公告栏」，开启并随意输入一段测试内容保存，确保系统会渲染sqs-announcement-barDOM节点，未开启功能时注入代码找不到对应元素会直接失效
• 代码必须注入到页脚代码注入位：Squarespace页面DOM从上到下加载，页眉注入的代码执行时公告栏元素还没渲染，无法匹配生效

完整实现代码 #

进入「设置」→「高级」→「代码注入」，将以下代码粘贴到「页脚」输入框，保存后刷新站点前台即可生效：

<style>
/* 固定公告栏到页面顶部作为永久头部 */
.sqs-announcement-bar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 99999 !important;
}
/* 给原有站点头部添加顶部偏移，避免被公告栏遮挡 */
.header, .sqs-header {
  margin-top: 40px !important;
}
/* 移动端适配，根据实际公告栏高度调整偏移值 */
@media screen and (max-width: 767px) {
  .header, .sqs-header {
    margin-top: 50px !important;
  }
}
</style>

注意：代码里的40px、50px为默认公告栏高度参考，你可以根据自己设置的公告栏字体、内边距实际高度调整数值，避免出现内容遮挡或空白过大的问题

异常问题修复 #

• 如果你使用Squarespace 7.0旧模板，将代码中.header, .sqs-header替换为#header即可匹配旧版头部类名
• 如果滚动页面出现布局抖动，在<style>标签内额外添加一行代码：body {padding-top: 40px !important;}，数值和公告栏高度保持一致即可

内容的提问来源于stack exchange，提问作者Annie James Walsh