Okay... background. I am using a simple text fade with scroll. My CSS Scripting for it is this:
margin: 10px auto;
background: url("images/bottom-fade.png") bottom center no-repeat;
I have it written in the .body of the CSS, but I only want it to apply to one container area. I have my body laid out into 5 areas:
Right now the background image "bottom-fade.png" is staticly attached to the bottom of my browser. I want it to be there, but as I scroll I want it to dissapear once I reach the bottom of the webpage otherwise it overlaps my pages border.
This is what my fading scroll starts as:
This is how it ends:
I want it to remain static just above the horizontal line below the text, or I want it to dissapear after my scrolling finishes.
Is ther some sort of coding I can add, or something I can change to make that work? I'm completely at a loss
Use jQuery for this. You'll need to calculate the window height somehow and kill the script when the page is scrolled xxx px from top. Offhand, I've never tried to do this. But I've used something similar in reverse. The following shows/hides a division on scroll.