/ / Сховати прокручуваний вміст під фіксованим прозорим заголовком, прокручувати фон - jquery, css, зображення, крос-браузер, прокручувати

Сховати вміст прокрутки під фіксованим прозорим заголовком, прокручувати фон - jquery, css, зображення, крос-браузер, прокрутка

Давайте скажемо, що у мене є фонове зображення, фіксоване зображення заголовка з прозорими частинами, вміст div з напівпрозорим фоном і динамічна висота в традиційному макеті заголовка / вмісту / нижнього колонтитула.

Ефект, який я намагаюся досягти: прокручування тла та вмісту під фіксованим заголовком (при цьому вміст приховано та відображається фон).

Я читав багато пов'язаних тем, наприклад Приховати вміст прокрутки під прозорим заголовком Але вони стосуються ситуацій, коли також можна виправити фон. Шахта повинна бути прокручуваною.

Мені вдалося отримати те, що мені потрібно, додавши одне й те ж фонове зображення до div-файлу заголовка div div і прокрутивши його за допомогою jQuery .scrollTop() на події прокручування вікна.

Довідка: jsbin Приклад
Довідка: jsFiddle Приклад

Проблема цього методу є досить поганою синхронізацією (деяким відставанням, розривом) у всіх браузерах ні з іменем Firefox.

Щоб уточнити: Висота вмісту буде динамічною. 10000px Я просто вибрав для прикладу. Я очікую, що це досягне досить часто, хоча іноді більше (AJAX канали), і на деяких сторінках він може бути близьким 0. Тому я синхронізую .height() теж. Майте на увазі, що footer div внизу під в content div.

І я думаю там має бути кращим способом. Будь-які пропозиції?

Відповіді:

0 для відповіді № 1

Неможливо просто використовувати позицію панель прокручування або область прокручування прокручувати динамічний вміст, просто розміщуючи його прямо під фіксованим заголовком?