如何让position:fixed侧边栏在页脚前停止及WordPress添加JS报错

作为JavaScript新手，在给评测页面添加侧边栏导航组件的过程中遇到两个阻塞问题：

• 固定定位的侧边栏始终覆盖在页脚上方，尝试调整层级（将侧边栏z-index设为0、页脚z-index设为99）完全没有生效
• 尝试把实现位置检测的JS代码直接写到主题的functions.php文件里，保存时直接触发PHP语法错误，所有改动被自动回滚

系统返回的报错提示为：wp-content/themes/villalegianbali/functions.php 文件第325行存在错误，PHP代码改动已被回滚，请修复后重试保存。语法错误，意外的'var'（T_VAR），期望文件结束。而报错的第325行，刚好就是粘贴的JS代码的第一行。

已编写的样式规则 #

.footer {
  height: 243px;
  z-index: 999 !important
}

.sidenav {
  width: 180px;
  position: fixed;
  bottom: 0;
  left: 30px;
  background-color: #fff;
  overflow: hidden;
  padding: 10px;
}

计划实现滚动位置检测的JS逻辑 #

原本想通过这段JS实现：当滚动到页脚区域时，把侧边栏从固定定位改成绝对定位，避免遮挡页脚内容；向上滚动离开页脚区域时，再恢复侧边栏的固定定位状态。

// 原本直接粘贴到functions.php里的JS代码
var sideNav = document.querySelector('.sidenav');
var footer = document.querySelector('.footer');

function checkOffset() {
  function getRectTop(el) {
    var rect = el.getBoundingClientRect();
    return rect.top;
  }

  // 侧边栏底部接近页脚时切换为绝对定位
  if ((getRectTop(sideNav) + document.body.scrollTop) + sideNav.offsetHeight >= (getRectTop(footer) + document.body.scrollTop) - 10)
    sideNav.style.position = 'absolute';
  // 视口距离页脚较远时恢复固定定位
  if (document.body.scrollTop + window.innerHeight < (getRectTop(footer) + document.body.scrollTop))
    sideNav.style.position = 'fixed';

  // 临时代码：把滚动位置数值写到侧边栏里方便调试
  sideNav.innerHTML = document.body.scrollTop + window.innerHeight;
}

// 监听页面滚动事件，实时检测位置
document.addEventListener("scroll", function() {
  checkOffset();
});

页面侧边栏的DOM结构 #

<div class="sidenav-parent">
  <div class="sidenav reviews-menu" style="position: fixed; float: left; bottom:0; margin-left: -30px; margin-bottom: 15px">
    <h4 class="reviews-menu-title">Choose your Villa:</h4>
    <a href="#karma">
      <h3 class="reviews-menu-item">Villa Karma Legian</h3>
    </a>
    <a href="#poppy">
      <h3 class="reviews-menu-item">Villa Poppy Legian</h3>
    </a>
    <a href="#aniela">
      <h3 class="reviews-menu-item">Villa Aniela</h3>
    </a>
    <a href="#segara">
      <h3 class="reviews-menu-item">Villa Segara Legian</h3>
    </a>
    <a href="#tropical">
      <h3 class="reviews-menu-item">Tropical House</h3>
    </a>
    <a href="#zakira">
      <h3 class="reviews-menu-item">Villa Zakira Legian</h3>
    </a>
  </div>
</div>
<!-- 页面主体评测内容 -->

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