Digamos que eu tenha uma imagem de plano de fundo, uma imagem de cabeçalho fixa com partes transparentes, uma div de conteúdo com um plano de fundo semitransparente e altura dinâmica em um layout tradicional de cabeçalho / conteúdo / rodapé.
O efeito que estou tentando alcançar: rolagem de fundo e conteúdo sob um cabeçalho fixo (com conteúdo oculto e exibição em segundo plano).
Eu li um monte de tópicos relacionados, como Ocultar conteúdo de rolagem sob cabeçalho transparente Mas eles lidam com situações em que o fundo também pode ser consertado. O meu tem que ser rolável.
Consegui o que preciso adicionando a mesma imagem de fundo a um wrapper div da div da imagem do cabeçalho e a rolar com jQuery .scrollTop() no evento de rolagem da janela.
Referência: jsbin Exemplo
Referência: Exemplo jsFiddle
O problema deste método é muito ruim sincronia (alguns lag, rasgando) em todos os navegadores não chamado Firefox.
Esclarecer: A altura do conteúdo será dinâmica. 10000px Eu apenas peguei o exemplo. Eu espero que chegue a isso com bastante frequência, às vezes mais (feeds AJAX), e em algumas páginas pode estar perto de 0. É por isso que estou sincronizando .height() também. Tenha em mente que rodapé div na parte inferior é sob a conteúdo div.
E eu acho que ai tem que ser uma maneira melhor. Alguma sugestão?
Respostas:
0 para resposta № 1Você não pode usar um posicionado painel de rolagem ou área de rolagem para rolar seu conteúdo dinâmico, simplesmente posicionando-o diretamente sob o cabeçalho fixo?