滚动页面时如何修改固定导航栏伪选择器的背景颜色？

嘿，我完全懂你现在的困扰——伪元素（比如::before、::after）确实没法直接用JS选中，因为它们根本不是真实的DOM节点，是CSS渲染出来的“虚拟元素”！不过别发愁，有两个非常实用的办法能搞定这个需求，我给你一步步说清楚：

方法1：使用CSS变量（最推荐） #

这是现代前端最简洁的解决方案，把伪元素的颜色值绑定到CSS变量上，然后用JS修改变量值就行。

步骤1：在CSS中定义变量并绑定伪元素 #

/* 默认状态下的伪元素样式 */
.navbar::after {
  color: var(--pseudo-text-color, #fff); /* 第二个值是默认 fallback */
  /* 其他伪元素样式，比如content、position之类的 */
}

步骤2：在JS滚动事件中修改变量值 #

把你现有的代码稍作修改，加上修改CSS变量的逻辑：

$(document).ready(function() {
  $(window).scroll(function() {
    if ($(this).scrollTop() > 50) {
      // 修改导航栏本身的样式
      $('.navbar').css({
        'background-color': '#fff',
        'color': '#333'
      });
      // 修改伪元素的颜色变量
      $('.navbar').css('--pseudo-text-color', '#333');
    } else {
      // 恢复默认样式
      $('.navbar').css({
        'background-color': '#333',
        'color': '#fff'
      });
      $('.navbar').css('--pseudo-text-color', '#fff');
    }
  });
});

这个方法的好处是：不用改太多现有代码，逻辑清晰，而且CSS变量的兼容性现在已经非常好（除了极老的IE）。

方法2：通过切换CSS类来控制伪元素 #

如果不想用CSS变量，也可以给导航栏添加/移除类，用CSS类来控制伪元素的样式，这种方式把样式逻辑放回CSS，JS只负责状态切换，后期维护更方便。

步骤1：在CSS中定义不同状态下的伪元素样式 #

/* 默认状态 */
.navbar::after {
  color: #fff;
}
/* 滚动后的状态 */
.navbar.scrolled::after {
  color: #333;
}

/* 顺便把导航栏的样式也放到类里，后期优化时可以去掉JS里的css()调用 */
.navbar.scrolled {
  background-color: #fff;
  color: #333;
}
.navbar {
  background-color: #333;
  color: #fff;
  /* 其他导航栏默认样式 */
}

步骤2：在JS中切换类 #

$(document).ready(function() {
  $(window).scroll(function() {
    if ($(this).scrollTop() > 50) {
      $('.navbar').addClass('scrolled');
    } else {
      $('.navbar').removeClass('scrolled');
    }
  });
});

这样一改，你的JS代码瞬间简洁很多！后期优化的时候，把所有样式都放到CSS类里，JS只负责切换状态，代码会更干净。

补充说明：为什么无法直接选中伪元素 #

伪元素是CSS创建的虚拟元素，它们不存在于DOM树中，所以document.querySelector()或者jQuery的选择器都找不到它们，只能通过修改影响它们的CSS规则（比如变量、类）来间接改变样式。

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