0

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%);"
        });
      });
practicemakesperfect
  • 404
  • 4
  • 15

1 Answers1

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!

Chris Wickham
  • 521
  • 2
  • 5
  • 19