Исчезает изображение, когда пользователь достигает div # ID + исчезает после еще n пикселей

Question

В настоящее время я работаю над макетом одной страницы для веб-сайта.У каждого раздела страницы есть соответствующий логотип «theme», который я хотел бы, чтобы jQuery отображал его, когда пользователь достигает позиции.При дальнейшем перемещении на определенное количество пикселей (например, на 100 пикселей вверх или вниз) изображение должно снова исчезнуть.Есть простой способ сделать это?Высота каждого элемента не фиксирована (за ним стоит CMS), поэтому я не могу просто указать фиксированное значение px сверху или что-то в этом роде.Конечно, если вы переместитесь дальше вниз или вверх к любому другому элементу div, изображения должны исчезнуть, как и прежде.

Вот мой пример кода

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

Answer 1

Если я вас правильно понял, вот краткая демонстрация того, что вы ищете:

• http://jsfiddle.net/G979Q/

Там нет изображений, только цветные div, ноесли это то, что вы хотите, вы сможете довольно легко расширяться.В зависимости от других ограничений того, как элементы размещаются в CMS, вы можете столкнуться с проблемами, но все же общая идея должна быть применима.

Редактировать: просто чтобы убедиться, что комментарии включены в ответ, для прокрутки -на основе вместо исчезновений на основе мыши, вот короткая демонстрация:

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

Кредиты:

• http://css -tricks.com / snippets / jquery / рассчитать расстояние между мышью и элементом /
• jQuery fadeOut без отображения нет?
• http://api.jquery.com/mouseleave/

Надеюсь, это поможет.