Hola Amigo ! Si deseas tener ese resultado, debes saber un poco de CSS o CSS3...Te intentare explicar de la manera mas óptima y sencilla para que aprendas algunas características del CSS3.
Lamentablemente este tipo de "form" necesita un script de facebook y twitter, donde para fijarlo también necesitas conocimientos de Js o CSS3, el cual a función del scroll sucede algún evento, en este caso, seria el contenedor bajando, espero haberme explicado.
Si deseas saber como hacer esto e investigar mas del asunto del js, te dejo estos link que te pueden ayudar a entrar al mundo del js
http://www.lawebdelprogramador.com/codigo/JavaScript/2516-Scroll-de-noticias-en-JavaScript-y-HTML5.html
http://www.lawebdelprogramador.com/codigo/archivos3/js_scroll.php
Te enseñare algo mejor amigo, y que de a poco podras aplicar a tu web con mas desarrollo. En CSS existe hoy en dia, opciones de posicionamiento. La que hace este efecto es:
Esta opción te hará que cualquier contenedor con este formato este siempre visible. En la página que tu mandaste si revisas bien el código fuente veras que el tiene un <div> con una "id="contenedor_scroll"> y muchos script mas..Esos script son de esta web:
https://developers.facebook.com/docs/plugins/like-button
En twitter tambien hay esos script puedes colocar en google "Boton Seguir Twitter" o algo asi.
si deseas agregar un boton mg o algun otro script debes apretar get code aqui:
Con esto tu le tienes que dar las propiedades, el ancho y todo, yo te hare una plantilla para que te sea mas facil todo y no tengas que perder o calentarte con que quede bien.
Código:
<body> <!------- EL CODIGO DE ABAJO SE COLOCA POR ENCIMA DE LA PÁGINA Y DESPUES DE LA ETIQUETA BODY -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/es_LA/sdk.js#xfbml=1&version=v2.3";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div id="columna_social">
<div class="fb-like" data-href="URL DE TU PAGINA DE FACEBOOK A COLOCAR ME GUSTA" data-width="ANCHO DEL BOTON" data-layout="button_count" data-action="like" data-show-faces="true" data-share="false"></div>
<!-- SI DESEAS MAS BOTONES TIENES QUE AGREGARLOS AQUI DESPUES DE ESTE DIV -->
</div>
</div>
Código: .fb-like{
margin: 5px auto;
}
#columna_social {
background-color: #EBE9EA; <!-- COLOR DE FONDO -->
border: 1px solid #D2D2D2; <!--Bordes-->
border-radius: 8px 8px 8px 8px; <!--Bordes redondeados-->
float: left; <!-- Donde la imagen estara flotando puede ser cualquier punto cardinal, tanto izquierda o derecha -->
position: fixed; <!-- Esto es lo que determina que al mover el scroll, la imagen quedara fija-->
min-height: 225px; <!-- Mínimo de altura-->
margin-bottom: 10px; <!-- Margen con el botton o la parte inferior del elemento-->
margin-right: 10px; <!-- Margen izquierda-->
overflow: hidden; <!-- es la barra del scroll que tu subes y bajas en este caso esta oculta-->
text-align: center; <!-- Texto centrado-->
width: 200px; <!-- puedes modificar el ancho-->
margin: 5px; <!-- el margen-->
z-index:10000; <!-- Para que este arriba de todo el contenido de tu web -->
-webkit-transition: .3s all; <!-- un regalo mio para que tengas mejor estilo, es un efecto -->
-moz-transition: .3s all;
}
Explique lo mas necesario... el resultado seria este:
Si quieres llegar a tener mas botones solo tienes que agregarlos dentro del Div "columna_social", te lo dejare como Tarea y para cualquiera que lea esta Respuesta.
Para llegar al resultado de esa web, son muchos códigos que te enredarian más, pero cuenta desarrolle una plantilla de esto para PWG con todos los botones no dudes que lo publicaré. Cualquier cosa comenta
Saludos
Namespec
