Fading Element on Scroll

Posted by user179846 on Stack Overflow See other posts from Stack Overflow or by user179846
Published on 2009-09-27T20:59:31Z Indexed on 2010/03/28 16:03 UTC
Read the original article Hit count: 165

Filed under:

scroll

|

fade

|

JavaScript

|

div

|

visibility

I'm curious how I can create a DIV (or anything really) that I can fade (or change opacity of) when a user scrolls down the page. This DIV would sit at the top of the page, but only be clearly visible when at the very top of the page.

Additionally, it would be ideal if I I could have this element fade back in onmouseover, regardless of the current scrolled position on the page.

© Stack Overflow or respective owner

Related posts about scroll

Need a new mouse: clicky scroll wheel and additional thumb-operated scroll wheel

as seen on Super User - Search for 'Super User'
I'm having some carpel tunnel syndrome or RSI issues, and I need to get a new mouse. I've tried a friend's Logitech MX Revolution and it's almost perfect. I LOVE the thumb-operated scroll wheel, and I think that that alone would solve many of my hand pain issues. The problem is that it uses their… >>> More
my mouse scroll wheel doesn't scroll

as seen on Super User - Search for 'Super User'
It's only a minor thing but i can't solve it. I have a ps2 mouse on win xp sp3. the wheel has stopped scrolling in all apps however in apps that support it i can click the wheel and bring up the scrolling four way arrows and scroll that way. I've tried uninstalling the drivers and changing the… >>> More
How to automatically scroll ScrollViewer - only if the user did not change scroll position

as seen on Stack Overflow - Search for 'Stack Overflow'
I would like to create the following behaviour in a ScrollViewer that wraps ContentControl: When the ContentControl height grows , the ScrollViewer should automatically scroll to the end. This is easy to achive by using ScrollViewer.ScrollToEnd(). However, if the user uses the scroll bar, the automatic… >>> More
Programmically scroll a textbox's scroll bar from a Vscrollbar or custom one

as seen on Stack Overflow - Search for 'Stack Overflow'
I made a custom scrollbar that sits beside a normal textbox. I would like to scroll the text box like you would any other one with my control. How can this be done? Thanks. >>> More
Mouse scroll not working in a scroll viewer with a wpf datagrid and additional UI elements

as seen on Stack Overflow - Search for 'Stack Overflow'
I am trying to figure out how to get the mouse scroll working on a wpf window with a scrollviewer and a datagrid within it. The WPF and C# code is below <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto"> <Grid> <Grid.RowDefinitions> … >>> More

Related posts about fade

UILabel fade-in fade-out question

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi there, I got the following code inside an NSTimer selector: [UIView beginAnimations:nil context:NULL]; [UIView setAnimationDuration:2.0]; [infoLbl setAlpha:0]; [UIView commitAnimations]; [UIView beginAnimations:nil context:NULL]; [UIView setAnimationDuration:2.0]; [infoLbl setAlpha:1]; [UIView… >>> More
Blending textures together, texture fade over / fade in

as seen on Game Development - Search for 'Game Development'
What is the best way to render a texture overlapping effect? Like in this example: I want either the grass to fade in to the snow texture, or the other way around. No rough edges. Somehow make them blend over. So the grass has a bit of snow or the snow has a bit of grass How is this possible during… >>> More
Fade Out an <ul> and Fade In Info From DB

as seen on Stack Overflow - Search for 'Stack Overflow'
On my portfolio page I have this setup: <div id="portfolio"> <ul id="sites"> <li> <h3><a href="#">MotorSomethin</a></h3> <img src="http://dummyimage.com/265x100/000/fff" /> <p> … >>> More
jquery li with image fade in background (fade in class)

as seen on Stack Overflow - Search for 'Stack Overflow'
I'm currently using this code: var gallery = $('ul#gallery').children(); $(gallery).filter(':even').not(':last').hover(function () {$(this).toggleClass('next')}); I'm trying to make it fade this new class in. Currently, there's an <li> with an image in it, no background. When the 'next'… >>> More
Fading in/Fade out text in IE

as seen on Stack Overflow - Search for 'Stack Overflow'
I had a problem and whipped up a quick solution: fade-in and fade-out a series of quotations. My solution works just as I want it in every browser except any of the IEs. The only problem with the IEs is that the text does not fade in and fade out; the text simply pops into existence. I believe I've… >>> More