CSS Z-Index OVER Javascript «Survey Monkey» PNG Затухание в нижней части полосы прокрутки

Question

Глядя на добавление PNG Fade в нижней части нашей анкеты опроса. Короткие вопросы не покажут их, но для более длинных с вертикальным прокруткой я хотел бы добавить небольшое угасание внизу, чтобы указать, что ниже. Полоса прокрутки должна быть достаточной, чтобы уведомлять людей, но некоторым людям нужно немного больше, плюс то, что «мы» (мой босс и я) хотим.

Вот страница я работаю: http://www.careersinmusic.com/template.aspx

Нажмите "Click Me для исследования" Ссылки для загрузки обследования.

ВОПРОС № 3 длиннее и использует свиток. Нажмите «Да» для вопросов №1 и №2, чтобы перейти к длинному вопросу №3.

Любая помощь всегда приветствуется, надеюсь, этого достаточно.

Answer 1

• Во-первых, дайте свой #PageContentDivposition стиль (вероятно relative).
• Затем включает выцветание изображения PNG в этом DIV, а также с position (вероятно absolute)
• Дайте z-index:1 к #PageContentDiv, z=index:2 к фейдеру изображению
• Установить display:none на этом фейдер изображении
• Javascript: Тест, если #PageContentDiv прокручивается (.scrollTop==0)
• Javascript: Показать фейдер (.style.display=''), если полоса прокрутки еще на 0

Ключи, которые необходимо запомнить, - это то, что элементам нужен стиль position, чтобы применить z-index, и что вам нужно будет удалить фейдер, как только пользователь понял, что окно можно прокручивать.