Menu fixo rede social

[wneo 5]

Boa noite!!!

 

Pessoal, montei um menu fixo na lateral do site com os ícones das redes sociais. Quero adicionar um efeito de sensibilidade ao scroll quando rolar pra baixo... Ele é position:fixed; então fica sempre visível e por cima de tudo ao rolar o scroll, eu gostaria de um efeito tipo easing pra ele andar conforme desce ou sobe a barra do navegador... Se alguém souber como fazer em CSS puro, melhor! Mas creio que um javascript vai ser necessário...quer puder me ajudar a implementar diz aí!!!

 

Vou colocar abaixo o menu montado incluindo a tooltip que fiz pra quando colocar o cursor em cima dos ícones:

.menu_fixed{
border:1px solid #bbb;
border-radius:0 5px 5px 0;
width:18px;
height:150px;
background:rgba(207,207,207,0.5);
position:fixed;
top:19%;
z-index:999999999999;
}


.tt-wrapper{
	padding: 0;
	width: 435px;
	height: 70px;
	margin: 18px auto 30px auto;
}


.tt-wrapper li a{
	display:block;
	width: 25px;
	/*height: 70px;*/
       line-height:30px;
	margin: 0 -5px;
        color:#000000;
	outline: none;
	text-decoration:none;

	background: transparent
          /*font-size:14px;*/


/*url(../images/growcase_the_social_gunman_icons.png) no-repeat top left;*/

	text-indent: -9000px;
	position: relative;
}



.tt-wrapper li a span{
	width: 150px;
	height: auto;
	line-height: 20px;
	padding: 10px;
	left: 50%;
	;
	font-family: 'Alegreya SC', Georgia, serif;
	font-weight: 400;	
	font-style: italic;
	font-size: 14px;
	color: #c12;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
	text-align: center;
	border: 4px solid transparent;
	/*background: rgba(255,255,255,0.3);*/
        background: rgba(000,000,000,0.2);
	text-indent: 0px;
	border-radius: 5px;
	position: absolute;
	pointer-events: none;
	bottom: -22px;
	opacity: 0;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}


/*seta na tooltip*/
.tt-wrapper li a span:before,
.tt-wrapper li a span:after{
	content: '';
	position: absolute;
	bottom: 20px;
	left: 50%;
	;
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid rgba(0,0,0,0.1);
        border-top: 10px solid transparent;
	border-bottom: 10px solid transparent ;
<!--rgba(0,0,0,0.1)-->
}

/*seta na tooltip*/
.tt-wrapper li a span:after{
	/*bottom: -14px;
	;
	border-top: 10px solid #fff;*/
}

/*estado de aparecimento da tooltip*/
.tt-wrapper li a:hover span{
	opacity: 0.9;
	bottom: -19px;
        left:100px;
}

[thyquevedo 6]

Da uma olhada nesse artigo, vai te ajudar nesse efeito que você quer fazer, é só adaptar o código.

 

http://tympanus.net/Development/HeaderEffects/

 

Abraço.