Hugo静态站点滚动时动态更新sticky header标题问题排查

你混淆了Hugo服务端模板变量和客户端JavaScript变量的执行逻辑：

• {{ $page-scroll }} 是Go模板变量，仅在Hugo构建站点/服务端渲染页面时执行一次，渲染完成后输出到浏览器的已经是固定的静态文本，客户端JS无法反向修改已经生成完成的服务端变量。
• 滚动事件是浏览器端运行的JS逻辑，仅能操作浏览器端的DOM、JS变量，无法影响服务端渲染的结果。

直接通过JS操作DOM实现需求即可，partials/page-title.html 代码如下：

{{/* 服务端提前判断页面属性，把需要的参数写入DOM属性 */}}
<section class="page-title">
  <div class="container">
    <div class="row">
      <div class="col-10">
        {{ if eq .Section "critique" }}
        <h3 id="critique-header" 
            {{ if .IsPage }}data-single-title="{{ .Title }}"{{ end }}>
            Critique
        </h3>
        {{ end }}
      </div>
    </div>
  </div>
</section>

<script>
$(window).on("scroll", function () {
  const $critiqueHeader = $('#critique-header')
  // 非critique分区、或者是列表页（没有single标题属性）直接跳过逻辑
  if (!$critiqueHeader.length || !$critiqueHeader.data('single-title')) return

  const scrollTop = $(this).scrollTop()
  if (scrollTop > 150) {
    // 滚动超过阈值，追加文章标题
    if (!$critiqueHeader.text().includes('/')) {
      $critiqueHeader.text(`Critique / ${$critiqueHeader.data('single-title')}`)
    }
  } else {
    // 滚动回到顶部，恢复原文本
    $critiqueHeader.text('Critique')
  }
})
</script>

• 服务端渲染阶段就判断当前页面所属分区、页面类型：只有critique分区的single页才会把文章标题写入data-single-title属性，列表页不会带该属性。
• 客户端JS直接操作DOM文本内容，不需要跨端修改变量，自动适配列表页/详情页的不同逻辑，完全符合你的需求。

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