页面滚动时background-position被自动修改致背景错位如何解决

这个问题的核心原因是type-on-strap主题内置的滚动交互脚本会动态计算并修改顶部横幅的background-position属性，同时你设置的颜色遮罩、背景图两个背景层没有统一的附着规则，滚动时两层位置计算不同步，就会出现撕裂错位的效果。 #

方法1：纯CSS强制覆盖（无需改主题源码，推荐） #

找到主题支持的自定义样式文件，一般路径为assets/css/custom.scss（这个文件的样式不会被主题更新覆盖），加入如下代码：

.site-header {
  /* 两个背景层（颜色遮罩、横幅图）统一设置固定附着模式 */
  background-attachment: fixed, fixed !important;
  /* 强制锁定背景位置，覆盖JS动态写入的负偏移值 */
  background-position: center center, center top !important;
  /* 禁止背景重复填充导致的偏移 */
  background-repeat: no-repeat, no-repeat !important;
}

/* 不需要主题自带的横幅收缩视差效果的话，加下面这段直接关掉动画 */
.site-header .header-content {
  transform: none !important;
  padding: 8rem 0 !important;
}

保存后重新提交部署GitHub Pages，清空浏览器缓存即可生效，!important声明会优先于JS动态修改的行内样式，不会再出现背景位置被自动改写的问题。

方法2：调整主题JS逻辑（保留视差动效场景用） #

如果需要保留滚动时横幅收缩的视差效果，只修复错位问题，找到主题的滚动逻辑脚本，一般路径为assets/js/functions.js，定位到修改头部背景位置的代码段。原逻辑默认只会给背景图层计算偏移值，没有同步给颜色遮罩层，把赋值逻辑修改为两个背景层同步偏移即可：

// 注释掉原有单图层偏移逻辑
// $header.css('background-position', 'center, calc(-50% + ' + scrollOffset + 'px)');
// 替换为双图层同步偏移
$header.css('background-position', `center center, center calc(${scrollOffset}px)`);

验证方式 #

修改完成后打开浏览器开发者工具，选中.site-header元素，滚动页面时观察属性面板里的background-position值，两个背景层的位置不会再出现数值不匹配的情况，错位问题就解决了。如果部署后暂时没生效，检查Jekyll编译是否正常，清理Pages缓存后重试即可。

内容的提问来源于stack exchange，提问作者StevenMurray