Hola!
Tengo una barra de redes sociales en una web que necesito que cuando haga scroll esté como transparente y más pequeña. Logre que sea transparente pero no puedo hacer que se achique.
Cómo puedo hacerlo?
Este es el código html
Código HTML:
<div class="content_fullwidth">
<div id="redes" class="featured_section69" style="text-align:center;position:sticky;bottom:60px;display:block;position:fixed;">
<div class="container">
<ul>
<li style="display: inline;margin-right:15px;"><a href="https://www.facebook.com/oficialidp?fref=nf" target="_blank"><img src="images/facebook.png" /></a></li>
<li style="display: inline;margin-right:15px;"><a href="https://twitter.com/" target="_blank"><img src="images/twitter.png" /></a></li>
<li style="display: inline;margin-right:15px;"><a href="https://www.linkedin.com/hp/?dnr=nLTRz8eCKiuUR-Je_kFQihjnKiuUR-DAJTFF" target="_blank"><img src="images/linkedin.png" /></a></li>
<li style="display: inline;margin-right:15px;"><a href="https://plus.google.com/u/1/115557945341348737807/posts" target="_blank"><img src="images/google+.png" /></a></li>
<li style="display: inline;margin-right:15px;"><a href="http://institutodelpetroleo.educativa.org/acceso.cgi?id_curso=" target="_blank"><img src="images/alumno.png" /></a></li>
</ul>
</div>
</div><!-- end featured section 69 -->
<div class="clearfix margin_top12"></div>
</div><!-- end content area -->
Y este es el código que use para darle la transparencia
Código:
<script type="text/javascript" src="transparente.js"></script>
<script type="text/javascript">
$(function() {
$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
if(scrollTop != 0)
$('#redes').stop().animate({'opacity':'0.2'},400);
else
$('#redes').stop().animate({'opacity':'0.2'},400);
});
$('#redes').hover(
function (e) {
var scrollTop = $(window).scrollTop();
if(scrollTop != 0){
$('#redes').stop().animate({'opacity':'1'},400);
}
},
function (e) {
var scrollTop = $(window).scrollTop();
if(scrollTop != 0){
$('#redes').stop().animate({'opacity':'1'},400);
}
}
);
});
</script>
Intente con width y con background-size pero nada..
Me ayudan?
Gracias!!!!!