如何更改 body:before 的 css 以影响线性渐变中的颜色停止？

Question

我在页面底部有一个线性渐变，由body:before 设置。现在，当我向下滚动页面时，我希望 75% 的颜色停止发生变化，所以我有下面的 js/jquery 代码。我不认为$("body:before")works，所以我该如何解决这个问题，所以当我向下滚动时，颜色停止也会逐渐上升？

html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
}

body:before {
    content:'';
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100%;
    z-index: -1;
    background: linear-gradient(to bottom, rgba(0, 0,0,1) 0%, rgba(30,30,30,1) 75%, rgba(180,180,180,1) 100%);
}

这是js代码：

$(window).scroll(function(){
        $("body:before").css({
          "background": "linear-gradient(to bottom, rgba(0, 0,0,1) 0%, rgba(30,30,30,1) " + (75 - $(window).scrollTop()/100) + "%, rgba(180,180,180,1) 100%);"
        });
      });

Answer 1

恐怕你不能使用 jQuery 来定位伪元素！我的建议是制作一个具有您想要的样式的元素，并将其定位为 absolute 或 fixed（取决于您想要实现的目标）到主体底部或容器元素，这将具有 position: relative。

或

向body 添加一个类，它会改变:before 的样式。老实说，这可能是更好的呐喊！