A raíz de una consulta en Twitter de mi buen amigo @tecnorama y de mi nuevo amigo @opeto82, he preparado una minidemo para dejar fijo el cabecero (o el elemento que nos interese) al hacer scroll y no perderlo de vista.

Seguramente habrás visto miles de webs (incluso la mía) que al desplazarte con las barras de desplazamiento vertical, pierdes el logo, el menú o algún elemento que te haría falta tener a mano si el contenido se hace muy extenso.

Pues bien, este pequeño código de 2 líneas aplicará una clase CSS a nuestro elemento si el scroll supera determinados pixels y se la quitará si el scroll vuelve a su estado original.

ver más >

Lo que vamos a hacer en este post es agregar dinámicamente un botón para volver a la parte superior de la web si nuestra página tiene scroll vertical.

Básicamente controlaremos la posición vertical de nuestra página y si ésta supera un tamaño especificado en el código javascript, aparecerá un botón con una flecha apuntando hacia arriba en la parte inferior derecha de nuestra pantalla.

Lo curioso de ésto es que, por una vez, lo haremos sin utilizar ninguna clase de plugin y lo haremos de tal manera que no haga falta escribir el botón en todos los html de nuestra web -aunque en lenguajes dinámicos agregarlo en alguno de los includes que utilices evitaría una línea de javascript-.

ver más >

Ya comenté varias veces distintos plugins para personalizar las barras de scroll de tu navegador, div o elemento mediante jQuery. Lo que traigo es otro más, que se suma a la gran lista de plugins para scrollbars y Jquery que encontré aquí.

Perfect Scrollbar es muy pequeño pero potente plugin para personalizar nuestras barras de desplazamientos y pequeño, en todo sentido, ya que cuenta con un CSS de 4 líneas en la versión min y el .js sin comprimir no supera los 8 kb.

Es totalmente personalizable mediante CSS y contiene varias opciones que, acompañado del plugin jQuery Mousewheel nos dará scroll utilizando la rueda del ratón.

ver más >

Ahora que ya conoces las redes sociales, porque las conoces, no? habrás visto que la mayoría utiliza el scroll infinito de datos, es decir, a medida que vas bajando el scroll en la pantalla, se van cargando automáticamente nuevos registros de tus bases de datos.

Pues bien, sé que estas técnica tiene seguidores y detractores por igual. Yo, simplemente, estoy en el medio, me parece bien aplicarla en algunas ocasiones (te evitas un paginado por ejemplo en una lista de noticias) pero este contenido no es nada amigable a los motores de búsqueda, porque, básicamente, no existe, entonces no es indexable (cosa que sí lograrías con una paginación).

En sistemas cerrados como Facebook o Twitter, donde la indexación en buscadores básicamente no interesa, les da igual un método que otro y prefieren ese método por la fluidez de la carga del nuevo contenido, pero en tu caso, si tu web está orientada al posicionamiento, no es nada recomendable el uso de ajax para la carga de datos ya que el robot del dios Google no podrá acceder a él al no existir.

ver más >

Smooth Scrolling es un plugin desarrollado en jQuery que sirve para crear un sistema de navegación on-page, es decir, las típicas páginas web de 1 sólo html.

Hablando más claro, si tienes una web con poco contenido y quieres desarrollarla solo en un html pero con el contenido bien organizado, este plugin te viene pintado.

Sólo basta con definir un menú de navegación que quedará siempre fijo en pantalla y luego tantos divs o capas como opciones tenga ese menú... el plugin se encargará de hacer el resto.

ver más >

jQuery NiceScroll es un plugin, tal como indica su nombre, que mejora las barras de desplazamiento tanto en ordenadores de sobremesa, portátiles y también en dispositivos móviles. Resumiendo, y si miras la imagen más arriba, verás que es un scroll similar al de Facebook.

Realmente, por lo que vi en su web, es lo más fácil que existe para poner a funcionar... sólo basta con indicarle qué elemento (body, div, etc...) tendrá el scroll, configurar por css su aspecto y todo finalizado.

Características:

ver más >

Este plugin es una alternativa al ya conocido ScrollTo, que lo que hace es que al presionar sobre una de las opciones de un menú con enlaces internos, éste desplace la página (o haga scroll) hasta el div correspondiente con una animación.

Además, tiene como ventaja, un peso muy reducido y varias opciones personalizables. Aun no lo he probado, pero desde ya no me gusta que muestre un mensaje que pone "Scrolling" a la derecha de la pantalla, pero imagino que se podrá configurar.

Hay una demo en la web de su autor por lo que no vale la pena reproducirla en mi web. Su código es muy sencillo y con pocas líneas lo tendremos funcionando.

ver más >

Si lo que quieres es personalizar las barras de scroll de tu navegador o usar capas o elementos con scrollbars y que no sean las simples barras que incluyen los navegadores, Tiny Scrollbar es tu opción. Permite personalizar las barras de desplazamiento de los elementos de tu web con un script de tan solo 2.29 kb.

Tiny Scrollbar puede utilizarse para aplicar barras de desplazamiento a tu contenido. Fue construido usando la biblioteca jQuery. Es una herramienta dinámica, ligera que da a los diseñadores web una forma eficaz de mejorar una interfaz de usuario web.

Características:

ver más >

Este es un plugin que ya he utilizado varias veces para mostrar contenido ´encajado´ en ciertas dimensiones y mejorar la barra de scroll que muestran los navegadores.

De sobra sabemos que el colorear las barras de scroll con CSS funciona sólo en Explorer... porque simplemente no es código válido. Entonces, qué mejor que implementar esta realmente fácil solución.

Se trata de aplicarle una barra de desplazamiento personalizada mediante CSS, con flechas, posibilidad de deslizar la barra arriba/abajo y todas las funciones normales de una barra de scroll.

ver más >