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

Question

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

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 （取决于您想要实现的目标）到 body 或容器元素的底部，其中包含 position: relative.

或

将 class 添加到 body，这会改变 :before 的样式。老实说，这可能是更好的呼喊！

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

How to change the css of body:before to affect color stop in a linear gradient?

html

javascript

jquery

gradient

colors