Скриване на превъртането на съдържание под фиксиран прозрачен хедър, превъртане на фона - jquery, css, image, cross-browser, scroll

Да кажем, че имам фоново изображение, фиксирано изображение на заглавната част с прозрачни части, съдържание на раздела с полупрозрачен фон и динамична височина в традиционното оформление на заглавката / съдържанието / долния колонтитул.

Ефектът, който се опитвам да постигна: превъртане на фон и съдържание под фиксиран хедър (със скрито съдържание и показване на фона).

Аз прочетох един куп от свързани теми, като например Скриване на превъртащо се съдържание под прозрачно заглавие и т.н. Но те се занимават със ситуации, при които фонът може да бъде фиксиран също. Моите трябва да бъдат превъртаеми.

Успях да получа това, от което се нуждая, като добавих същото фоново изображение към обвивка div на заглавието image div и превъртането му с jQuery .scrollTop() на събитието за превъртане на прозорци.

справка: jsbin Пример
справка: Пример за jsFiddle

Проблемът на този метод е доста лошо синхронизиране (известно закъснение, разкъсване) във всички браузъри не наречен Firefox.

Да се ​​изяснят: Височината на съдържанието ще бъде динамична. 10000px Просто избрах за пример. Очаквам да достигне до това доста често обаче, понякога повече (feeds AJAX), и на някои страници може да бъде близо до 0, Ето защо синхронизирам .height() също. Имайте предвид това футбол дива в дъното е при на съдържание div.

И мисля, че там трябва да бъде по-добър начин, Някакви предположения?

Отговори:

Не бихте могли просто да използвате позициониран прозорец за превъртане или района за превъртане за да прегледате динамичното си съдържание, просто го позиционирате точно под фиксираната си заглавка?