6

É possivel fixar um elemento( div, img, p ) em uma div com scroll e com position:relative e usando apenas css?

*Atualmente reposiciono a div usando a função $('elemento').scroll() e calculando o scroolTop() do elemento mas no IE( o pior browser do mundo ) existe meio que um delay e o elemento fica 'tremendo' por isso gostaria de saber se é possivel fazer isso só com CSS.

HTML:

<div class="divContainer">
    <div class="conteudoFixo">
        <h3>Objeto Fixo</h3>
    </div>
    <div class="conteudoNormal">
        <ul>
            <li>Primeira conversa</li>
            <li>Segunda conversa</li>
            <li>Terceira conversa</li>
            <li>Terceira conversa</li>
            <li>Terceira conversa</li>
            <li>Terceira conversa</li>
            <li>Terceira conversa</li>
            <li>Terceira conversa</li>
            <li>Terceira conversa</li>
            <li>Terceira conversa</li>
            <li>Terceira conversa</li>
            <li>Terceira conversa</li>

        </ul>
    </div>
</div>

CSS:

.divContainer {
    height:200px;
    width:300px;
    position:left;
    overflow:auto;
    border: 1px solid #FF0000;
    position: relative;
}

.conteudoFixo {
    position: absolute;
    top:0px;
    left:0px;
    background-color:#FF00FF;
    width:100%;
}

Link do exemplo: http://jsfiddle.net/uQLzv/

2
  • 2
    Talvez esta pergunta possa já ter respondido sua dúvida
    – Caputo
    Commented 16/05/2014 às 20:38
  • Caputo obrigado pela resposta é que ja utilizava isso(javascript) para reposicionar minha div, mas no IE( maldito ) ocorre um atraso ai a div fica tremendo. Mas enfim obrigado pela resposta. Commented 19/05/2014 às 12:57

3 Respostas 3

1

Então amigo a solução é simples, não faz o mínimo sentido deixar a .conteudoFixo dentro de uma div com scroll que no caso do seu código é a div pai .divContainer ... o mais sensato seria deixar a div q vc quer fixa fora do scroll, fazendo com que apenas os itens de lista rolem junto com a div, dessa forma faça como eu fiz no seu código que editei.

http://jsfiddle.net/uQLzv/5/

Explicando a edição:

1- A div .divContainer deixa de ter a propriedade height, continua sendo relativa, e dentro dela seguem 2 divs, a .conteudoFixo e .conteudoNormal ... ambas possuem a propriedade float:left juntamente com width:100%, desta forma uma fica abaixo da outra na ordem da sua marcação HTML.

2- A div .conteudoFixo apenas possui uma estilização css pra dar beleza, estilize como preferir.

3- Já a div .conteudoNormal, preste atenção ... ESSA DIV QUE DEVE POSSUIR A PROPRIEDADE overflow:auto juntamente com height: <Valor_que_vc_preferir>, essa div vai conter os itens que vão rolar na caixa

1
  • Valew, eu 'manjo' AS3 e Javascript, começando Java precisando de algo estamos ai! Commented 9/06/2014 às 18:42
1

Coloque isso em seu CSS:

.conteudoFixo {
    position: fixed;
    width: 300px;
    background-color:#FF00FF;
}
3
  • Desde ja obrigado pela ajuda. Então...é que quando eu uso o position:fixed a divFixa perde a referencia da divPai( fica por cima do scroll ) e não consigo controlar com o z-index; Mas valew mesmo assim, vou continuar tentando agora tenho uma base. Commented 16/05/2014 às 20:51
  • qual realmente seu objetivo? podemos achar uma alternativa para o position:fixed e absolute. Commented 16/05/2014 às 20:53
  • Então é colocar a divFixo por cima de todo conteúdo sem contar espaça é tipo o fixed em relação a janela mas no meu caso seria em relação div( com scroll ). Ahh, o meu objetivo é duplicar e fixar o header e colunas de uma tabela( posteriormente vou criar um plugin, os que encontrei não são tão flexiveis ); *Porfavor não relacione tabela a esta pergunta, Valew XD Commented 16/05/2014 às 21:01
1

Eu alteraria o seu css, adicionando esse código a classe conteudoNormal.

.conteudoNormal{
    overflow:auto;
    height:200px;
}

E deixaria a classe divContainer assim:

.divContainer {
    width:300px;
    position:left;
    border: 1px solid #FF0000;
    position: relative;
}
1
  • Então é que no meu caso a divFixa não pode 'empurrar' o conteudo normal e ficaria por cima mesmo, no meu caso seria o equivalente ao position fixed na janela( browser ) só que a divFixa teria como referencia a divContainer ao contrario da janela inteira. Valew desde já Commented 16/05/2014 às 21:08

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .