Is There A Way Of Making My Div Background Less And Less Transparent While User Keeps Scrolling The Webpage?

I have a bootstrap webpage that uses video background. What is more, I'm using the following css code: .transparent{ box-shadow: 0 0 0 1000px rgba(0, 999, 0, 1); overflow:h

Solution 1:

I am not sure about your requirement but checkout this updated jsfiddle of your's

Just added $("#black").css("opacity",$("body").scrollTop()/1000); in $(window).scroll such that it will increase the opacity on window scroll and I am using very small amount since the value of opacity can be only withing the range of 0 to 1

http://jsfiddle.net/Leytgm3L/36/

Solution 2:

You can create a $(window).scroll function in JQuery, detect scrolling direction and according to that, adjust the opacity with rgba like that:

$("#greenbox").css("background-color", "rgba(0, 999, 0, "+opacity+")");