Div que acompanha Scroll no rodapé

[Russo4xd 2]

Olá, pessoal, pesquisei aqui no site posts sobre a minha dúvida, mas não foi suficiente, e por isso estou criando um novo post. Bom, gostaria de saber como eu faço uma daquelas divs que ficam no rodapé do site e que sempre acompanham o scroll da página como jixedbar.

 

Criei meu próprio "bar" que fica no rodapé

 

#barra_news{
	position:aboslute;
	z-index:1;
	margin:0 1px;
	width:100%;
	float:right;
	border:1px solid #d0d0d0;
	height:300px;
	background-color:#EFEFEF;
}

que seria uma barra de notícias. E no HTML tem a função de faze-lo aparecer e desaparecer:

 

<script type="text/javascript">
function controlaCamada(barra_news)
{
    if( document.getElementById( barra_news).style.visibility == "hidden" )
    {
        document.getElementById(barra_news).style.visibility = "visible";
    } else
    {
        document.getElementById( barra_news).style.visibility = "hidden";
    }
}

function controlaLink(link_news)
{
	if( document.getElementById( link_news).style.visibility = "hidden" )
	{
		document.getElementById( link_news).style.visibility = "visible";
	} else
	{
		document.getElementById( link_news).style.visibility = "hidden";
	}
}

</script>

<div id="barra_news">
  <a style="text-align:center; font-family:'Trebuchet MS', Arial, Helvetica, sans-serif; display:block; font-size:20px;" href="#" onclick="document.getElementById('link_news').style.display='block'; document.getElementById('barra_news').style.display='none';">Fechar notícias</a>
<br />
</div>
	<a id="link_news" style="text-align:center; font-family:'Trebuchet MS', Arial, Helvetica, sans-serif; display:none; font-size:20px;" href="#" onclick= "document.getElementById('barra_news').style.display='block'; document.getElementById('link_news').style.display='none';">Exibir notícias</a>

porém, ela fica fixa como se fosse um próprio rodapé, ou seja, estático! Já tentei mudar no css de Absolute para Fixed, mas aí a div some!

 

Gostaria de saber como fazer para ela acompanhar o scroll pelo rodapé, e de preferência (se for possível) com o mínimo de jquery!

 

Obrigado!

[Erick Lucas 0]

Então, eu criei um ródape com um toogle abri/fecha, não sei se é bem isso que você queria

Não usei nenhum script, usei apenas um hack do css! ;)

 

http://cssdeck.com/labs/full/u7yjabp9

 

<input type="checkbox" class="toogle-hide" id="toogle-1">
<label for="toogle-1" class="btn"></label>

<div id="footer">
</div>

#footer {
    bottom: 0;
    position: fixed;
    z-index:999;
    
    width:100%;
    height:150px;
    background-color:#3498db;
    display: block;
    animation: slideUp 1s;
    -webkit-animation: slideUp 1s;
}

.btn {
  width: 30px;
  height: 30px;
  bottom: 0px;
  right: 10px;
  position: fixed;
  display: block;
    
  background: #2c3e50;
  border-radius: 5px 5px 0 0;
  z-index: 9999;
  color: white;
  line-height: 30px;
  text-align: center;
  text-decoration: none;
  font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
  font-size: 20px;
  cursor: pointer;
  
  -webkit-user-select: none;
  -moz-user-select: none;
   user-select: none;
}
.btn:hover {background: #34495e;}
.btn:before{
  content: "x";
}
/* Show Footer */
input[type=checkbox]:checked ~ #footer {
     display: none;
}

/* Change Icon */
input[type=checkbox]:checked ~ .btn:before {
    content: "+";
}

/* Slide Button */
input[type=checkbox]:not(:checked) ~ .btn {
     bottom: 150px;
    -webkit-animation: slideUpBtn 1s;
}

/* Hack Checkbox */
.toogle-hide {
   position: absolute;
   top: -9999px;
   left: -9999px;
   visibility: hidden;
}

/* Animate Footer and Button */
@-webkit-keyframes slideUpBtn {
  from {bottom:0px;}
  to {bottom:150px;}
}

@-webkit-keyframes slideUp {
  from {bottom:-150px;}
  to {bottom:0;}
}