如何更改body的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 （取决于要实现的目标）定位在实体或容器元素的底部，该元素应具有position: relative 。

要么

在body添加一个类，以更改您:before的样式。 老实说，这可能是更好的呼喊！