Question

49

Fade div to black on scroll

rated 0 times [ 52] [ 3] / answers: 1 / hits: 6864 / 10 Years ago, tue, may 13, 2014, 12:00:00

I want to fadeout my top image when I scroll down, so that it is completely black by the time it has scrolled off the page and completely normal when I am at the top of the page.

This is my JSFiddle.

This section of code:

<div class=jumbo midheight>

   test<br />test

</div>

I have my background color as black so I was thinking it would be smart just to fadeout my background-image element but it seems that isn't possible.

Does this mean I have to put an overlay onto the div itself?

And if so, how do I do it?

Ideally I'd like to avoid adding an overlay div on top but I think I might have to.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

isham

Add To Favorites

Follow

Total Points: 69

Total Questions: 86

Total Answers: 86

Location: Anguilla

Member since Sun, Jan 29, 2023

1 Year ago

isham questions

1 NodeJS - TypeError: Busboy is not a constructor

Wed, Jan 19, 22, 00:00, 2 Years ago

1 How to pass query parameters to next.js api handler when calling from inside of getStaticProps

Wed, Dec 2, 20, 00:00, 4 Years ago

1 How to display the values from ajax success data to the html table?

Tue, Feb 25, 20, 00:00, 4 Years ago

1 How to set expanded prop for material ui TreeView component conditionally

Tue, Feb 4, 20, 00:00, 4 Years ago

1 Getting Firebase doc.data is undefined

Sun, Dec 1, 19, 00:00, 5 Years ago

View All

answered 10 Years ago kennedi · Accepted Answer

You want to fade it to black, so - no, you can't fade a background image, but that's easy enough to get around. I used an overlay. I just positioned the div with the background image relative. Put another div inside and called it black overlay along with some added css and js.
CSS:

#blackOverlay{background-color:#000;opacity:0.0;position:absolute;top:0;width:100%;height:100%;}

JS:

  $('#blackOverlay').css('opacity',currentScrollTop/$('#blackOverlay').height());

Here's the fiddle http://jsfiddle.net/KCb5z/21/

I took out your js for simplicity, but you can see what I was going for there. that should get you started.

edit just saw you said you didn't want to use an overlay, but why not? easy solution.