窗口滚动时检测p类状态为父div加类的jQuery代码可行性咨询

你的第二部分代码不可行，主要存在两个关键问题：

1. $(this)指向错误：在$(window).scroll()的回调函数里，this指代的是浏览器窗口（window对象），并非你选中的<p>元素。所以$(this).parent()根本找不到目标div，自然无法给它添加headerGreen类。
2. 缺少移除类的逻辑：当滚动距离小于300时，你移除了<p>的bgwhite类，但第二部分代码没有处理移除headerGreen的情况，导致即使<p>已经没有bgwhite，父div的headerGreen类会一直保留，无法恢复初始状态。

修正后的代码（不修改第一部分） #

既然你不想改动第一部分的代码，我们可以调整第二部分的逻辑来实现需求：

$(window).scroll(function() {
  var scroll = $(window).scrollTop();
  // first section - 保持原代码不变
  if (scroll >= 300) {
    $("p").addClass("bgwhite");
  } else {
    $("p").removeClass("bgwhite");
  }
  // second section - 修正后的逻辑
  var $targetDiv = $("p").parent(); // 先获取p的父级div
  if ($("p").hasClass("bgwhite")) {
    $targetDiv.addClass("headerGreen");
  } else {
    $targetDiv.removeClass("headerGreen"); // 补上移除类的逻辑
  }
});

补充说明： #

• 因为你的两个<p>都在同一个父div里，所以$("p").parent()会直接获取到这个唯一的div（如果页面里有多个不同父级的<p>，建议给目标div添加id来精准定位）。
• 这里用$("p").hasClass("bgwhite")是因为你第一部分是给所有p统一添加/移除类，只要有一个p有这个类（实际这里所有p会同步有或没有），就给父div加类。

如果你的页面存在多个不同父级的<p>，可以改成遍历方式确保每个p的父级div都能正确响应：

// second section 多p多父div场景替代方案
$("p").each(function() {
  var $parentDiv = $(this).parent();
  if ($(this).hasClass("bgwhite")) {
    $parentDiv.addClass("headerGreen");
  } else {
    $parentDiv.removeClass("headerGreen");
  }
});

这样每个<p>都会单独检查自身的类状态，然后对应调整父div的类。

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