6

Eu tenho a ideia de construir um rodapé fixo na página similar ao do portal Terra de Economia. Tal funcionalidade vai me permitir expor um chat neste espaço.

Gosto da solução do Terra porque é possível retrair o objeto e ainda manter o mesmo no canto direito inferior sem atrapalhar a leitura da página.

Preciso saber o nome da propriedade e tecnologias envolvidas.

http://economia.terra.com.br/

2
  • 2
    CSS com display: fixed e JS para ocultar e exibir, além das duas imagens das setas... Commented 19/03/2014 às 12:58
  • Existe uma propriedade a respeito? encontrei uma solução chamada "sticky footer" mas ainda falta resolver o problema da barra retrátil. Commented 19/03/2014 às 13:12

2 Respostas 2

2

Crie um footer com um id="rodape" e depois coloque no css: html:

 <footer id="rodape"><a style="position: relative; right: 0px; float:left; font-size: 50px; display: block; text-decoration: none; color: #ffffff; " href="javascript:drop('fechar')" id="link"><span> < </span></a>
</footer>

css:

  #rodape{
    margin-bottom:0px;
    bottom: 0px;
    background: #333333;
    width: 100%;
    height: 50px;
    position: absolute;
    right: 0px;
    -webkit-transition: 0.5s;
  }

o width: 100% e o height: 50px são opcionais. Se você não quiser um um width: 100% alinha-se com o left:.

script para esconder/aparecer

    function drop(ver){
    if(ver == "fechar"){
        document.getElementById('rodape').style.left = "-97%";
        document.getElementById('link').style.float = "right";
        document.getElementById('link').href = "javascript:drop('abrir')";
        document.getElementById('link').innerHTML = ">";
    }if(ver == "abrir"){
        document.getElementById('rodape').style.left = "0px";
        document.getElementById('link').style.float = "left";
        document.getElementById('link').href = "javascript:drop('fechar')";
        document.getElementById('link').innerHTML = "<";
    }
}

E para aparecer quando o usuário está no fim este link pode lhe ajudar http://www.1stwebdesigner.com/tutorials/create-stay-on-top-menu-css3-jquery/

1
2

Você pode usar o .animate() do JQuery para esconder o mostrar o rodapé

Segue um exemplo:

JSFiddle

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 .