Merhaba arakadaşlar siteme sol kısmına hareketli bir sosyal medya buttonları yapmak istedim gece yaptım ama hareketlerde sıkıtı yaşadım birkaç arkadaştan destek aldım ancak işin içinden çıkamadık sizce nasıl düzeltebilirim ?

1.üstten 20px boşluk kalana kadar sabit kalsın yada footerin üzerine çıkmasın...

Önizleme: http://www.klavyer.com/windows-8-1-geliyor.html
Ekran Görüntüsü: http://prntscr.com/19rry7

Önrnek Siteler: http://yemre.com/color-boom
http://www.tamindir.com/mad-max-oyun...eyecek_h-4143/

Kodları:

<div id="begen_kutusu"class="dene"/>
         <div class="fbo">
facebook 
</div>
	     </div>
		 <div class="two">
twitter
		 </div>
		 <div class="go">
<!-- Place this tag in your head or just before your close body tag. -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
  {lang: 'tr'}
</script>

<!-- Place this tag where you want the share button to render. -->
<div class="g-plus" data-action="share" data-annotation="vertical-bubble" data-height="60"></div>
         </div>
		 </div>

#begen_kutusu{

overflow: hidden; 
margin-top:-21px; 
margin-left:-118px;
position:absolute;
box-shadow:0 2px 3px #e2e2e2;
height:260px;
box-shadow: 0 2px 3px #e2e2e2;
width: 78px;
background-color: #f3f6fe;
border: 1px solid #dbe4f3;
border-top: 3px solid #a5b2d0;
}
#begen_kutusu.dene{
position:fixed;
}


#begen_kutusu ul, #begen_kutusu li{list-style:none;display:block;
}
#begen_kutusu .fbo{margin:10px 0 0 8px;}
#begen_kutusu .two{margin:15px 0 0 4px;}
#begen_kutusu .go{margin:15px 0 0 8px;}