Powiedzmy, że mam obraz tła, stały obraz nagłówka z przezroczystymi częściami, element treści z półprzezroczystym tłem i wysokość dynamiczną w tradycyjnym układzie nagłówka / treści / stopki.
Efekt, który próbuję osiągnąć: przewijanie tła i zawartości pod ustalonym nagłówkiem (z ukrytą treścią i tłem).
Przeczytałem kilka powiązanych tematów, takich jak Ukryj przewijanie zawartości pod przezroczystym nagłówkiem itp. Ale zajmują się sytuacjami, w których tło można również naprawić. Mój musi być przewijany.
Udało mi się uzyskać to, czego potrzebuję, dodając ten sam obraz tła do opakowania div div obrazu obrazu i przewijając go za pomocą jQuery .scrollTop() w przypadku zdarzenia przewijania okna.
Odniesienie: jsbin Przykład
Odniesienie: jsFiddle Przykład
Problemem tej metody jest dość zła synchronizacja (niektóre opóźnienia, łzy) we wszystkich przeglądarkach nie o nazwie Firefox.
W celu wyjaśnienia: Wysokość zawartości będzie dynamiczna. 10000px Właśnie wybrałem dla przykładu. Spodziewam się, że osiągnie to dość często, czasem więcej (kanały AJAX), a na niektórych stronach może być blisko 0. Właśnie dlatego dokonuję synchronizacji .height() zbyt. Weź pod uwagę, że stopka div na dole jest pod temu znacznik div treści.
I myślę, że tam musi być lepszy sposób. Jakieś sugestie?
Odpowiedzi:
0 dla odpowiedzi № 1Couldn "t po prostu użyć pozycjonowane przewijania okienka lub obszaru przewijania do przewijania treści dynamiczne, po prostu umieszczając go bezpośrednio pod stały nagłówek?