JS实现粘性块在WordPress站点触发无限滚动问题咨询

问题原因 #

导致该问题的核心原因有3个：

• 脚本逻辑存在循环触发漏洞
  你当前的实现是在scroll事件回调中修改.loginform的paddingTop属性，该修改会直接导致.loginform自身高度sb_h、以及整个文档的高度$(document).height()同时发生变化。而DOM高度变化本身又会触发scroll事件，形成「滚动→修改padding→文档高度变化→再次触发滚动」的死循环。
  纯HTML环境下你写死的页脚预留高度mb=300刚好匹配实际页脚高度，边界判断sb_h + $(document).scrollTop() + sb_m + mb < $(document).height()可以在滚动到接近页脚时停止修改padding，所以不会触发循环。但WordPress添加页脚小工具后，实际页脚高度已经超过了你预设的300，边界判断永久成立，死循环就会被触发，paddingTop持续增加，文档高度无限拉长，表现为无限滚动。

• WordPress jQuery兼容模式的潜在问题
  WordPress默认开启jQuery的无冲突模式，全局$符号不会默认绑定到jQuery对象。如果你的脚本没有包裹在jQuery(function($) { ... })这类兼容包装器内，部分DOM选择、属性获取的操作会执行失败，导致sb_ot、sb_h等关键参数计算错误，进一步破坏边界判断的逻辑准确性。

• 事件监听没有做节流优化
  scroll事件的触发频率极高，每帧可能触发多次，你没有添加节流控制，只要满足判断条件就会重复修改DOM样式，进一步放大了循环触发的问题。

修复建议 #

• 优先改用CSS实现粘性效果，直接给需要粘性的元素添加如下样式即可，不需要JS监听滚动事件，完全避免循环问题：

.loginform #loginform {
  position: sticky;
  top: 80px; /* 对应你原来的sb_m参数 */
}

• 如果一定要保留JS实现，需要做三处修改：
  1. 把固定值mb=300改成动态获取页脚实际高度的逻辑，不要写死数值
  2. 给scroll事件添加节流控制，至少间隔20ms才执行一次计算，避免高频触发
  3. 所有jQuery代码包裹在WordPress兼容的包装器内，确保DOM加载完成后再获取元素参数，示例如下：

  jQuery(function($) {
    // 节流函数
    function throttle(func, delay) {
      let timer = null;
      return function() {
        if (!timer) {
          timer = setTimeout(() => {
            func.apply(this, arguments);
            timer = null;
          }, delay);
        }
      }
    }
    // 你的原逻辑放到这里，包裹在throttle内
    $(window).scroll(throttle(function() {
      // 原代码逻辑，注意动态计算mb的值
    }, 20));
  });
  

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