jQuery滚动触发添加类名失效：滚动过id为fullimg的元素后无法为body添加pastimg类

嘿，我来帮你一步步排查这个滚动事件没生效的问题，常见的原因大概有这几个：

• jQuery未正确加载或加载顺序错误
  先检查你的页面是否已经引入了jQuery库，而且要确保引入代码在你写的滚动事件代码之前。比如如果你的自定义脚本放在<head>里，但jQuery是在<body>末尾引入的，那执行脚本时jQuery还没加载，代码自然跑不起来。
  验证方法：打开浏览器控制台（F12），输入jQuery或者$，如果提示“未定义”，就是没加载jQuery，赶紧补上引入标签，比如：

  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  

• 错误使用了parent('body')
  你的代码里用sticky.parent('body')来获取body元素，但parent()只会查找直接父元素。如果#fullimg不是直接嵌套在body下（比如它在某个div容器里），那这个方法根本找不到body，加/移除类的操作自然没效果。
  修复方式：直接用jQuery('body')或者$('body')来选中body，不管#fullimg在DOM结构的哪个位置，这个选择器都能精准找到body元素。

• DOM就绪前执行了代码
  如果你的脚本在页面DOM还没加载完成时就执行了，那jQuery('#fullimg')会找不到这个元素，后续的offset().top也会报错，导致整个滚动事件逻辑失效。
  解决办法：把你的滚动事件代码包裹在DOM就绪回调里，确保DOM加载完成后再执行：

  jQuery(document).ready(function() {
      // 把你的滚动事件代码放在这里
  });
  

  或者把你的<script>标签放在<body>的最后面，这样浏览器会先渲染完DOM再执行脚本。

• 触发位置的计算逻辑不符合预期
  你用了jQuery('#fullimg').offset().top - 70作为触发阈值，这个值可能和你预期的触发时机不匹配。比如如果#fullimg本身就在页面顶部，那offset().top是0，减去70后变成-70，此时scroll >= -70永远为真，页面一加载就会给body加上pastimg类；反过来，如果阈值设置得太高，可能永远达不到触发条件。
  验证方法：在滚动事件里加日志，看看实际的滚动值和阈值：

  jQuery(window).scroll(function() {
      var height = jQuery('#fullimg').offset().top - 70;
      var scroll = jQuery(window).scrollTop();
      console.log('滚动值:', scroll, '阈值:', height); // 在控制台查看这两个值
      // 后续逻辑...
  });
  

  根据日志调整阈值，比如如果想在#fullimg完全滚出视口时触发，可以改成jQuery('#fullimg').offset().top + jQuery('#fullimg').height()。

• CSS类样式未生效（视觉上没变化）
  有时候代码逻辑是对的，类已经加上了，但因为CSS样式的问题，你看不到变化。比如pastimg类的样式优先级不够，或者样式本身写得有问题。
  验证方法：打开浏览器开发者工具的元素面板，查看body元素的类列表，确认pastimg是否存在；再检查对应的CSS样式是否被正确应用（有没有被划掉的情况）。

修复后的完整示例代码 #

jQuery(document).ready(function() {
    jQuery(window).scroll(function() {
        // 先检查#fullimg元素是否存在，避免找不到元素报错
        var fullimg = jQuery('#fullimg');
        if (!fullimg.length) {
            console.warn('#fullimg元素不存在');
            return;
        }
        
        var elementTop = fullimg.offset().top;
        // 这里可以根据需求调整触发阈值，比如减去70或者用元素底部位置
        var triggerHeight = elementTop - 70;
        var scrollTop = jQuery(window).scrollTop();
        
        if (scrollTop >= triggerHeight) {
            jQuery('body').addClass('pastimg');
        } else {
            jQuery('body').removeClass('pastimg');
        }
    });
});

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