Ver Mensaje Individual
  #1 (permalink)  
Antiguo 13/08/2015, 09:04
yopsop
 
Fecha de Ingreso: junio-2015
Mensajes: 18
Antigüedad: 9 años, 9 meses
Puntos: 0
Scroll animate

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!!!!!