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

Question

I have a linear gradient at the bottom of the page, which is set by body:before. Now I want that 75% color stop to change as I scroll down the page, so I have the js/jquery code below. I don't think $("body:before")works, so how can I fix that, so as I scroll down the color stop gradually goes up too?

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%);
}

Here's the js code:

$(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%);"
        });
      });

Chris Wickham · Accepted Answer · 2019-08-08T14:47:18.377

0

I'm afraid you cannot target pseudoelements using jQuery! My suggestion would be to make an element with your desired styling and position it absolute or fixed (depending on what you want to achieve) to the bottom of the body or a container element, which would have position: relative.

OR

Add a class to the body which alters the styling of your :before. That's probably the better shout in all honesty!

edited Aug 08 '19 at 14:47

answered Aug 08 '19 at 14:40

Chris Wickham

521
2
5
19

There are ways to target pseudo elements with Jquery... https://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin – Félix Paradis Aug 08 '19 at 14:43
Your solution sounds much nicer though. – Félix Paradis Aug 08 '19 at 14:44

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

1 Answers1