Question

I am currently working on a one-page layout for a website. Each section of the page has a corresponding ‘topic’ logo which I would like to have jQuery fade it in when the user reaches the position. When moving further a certain amount of pixels (like 100px up or down) the image should fade out again. Is there an easy way to do this? The height of each div isn’t fixed (CMS behind it), so I couldn’t just go with a fixed px amount from the top or something. Of course, if you move further down/up to any of the other divs the images should fade in as in the first place.

Here’s my example code

<div role="main">
    <div id="first"><img … />content…</div>
    <div id="second"><img … />content…</div>
    <div id="third"><img … />content…</div>
</div>

Answer 1

If I understood you correctly, here’s a quick demo of what you are looking for:

• http://jsfiddle.net/G979Q/

No images there, just colored divs, but if that’s what you want, you should be able to extend rather easily. Depending on other restrictions of how elements are placed by CMS, you might run into problems, but still the general idea should be applicable.

Edit: just to make sure the comments are captured in the answer, for scrolling-based instead of mouse-based fades, here’s a quick demo:

• http://jsfiddle.net/CPrcP/3/

Credits:

• http://css-tricks.com/snippets/jquery/calculate-distance-between-mouse-and-element/
• jQuery fadeOut without display none?
• http://api.jquery.com/mouseleave/

Hope this helps.