Cómo agregar una barra de desplazamiento fija a un sitio web con CSS

Escrito por brandy alexander | Traducido por walter f. stocco
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo agregar una barra de desplazamiento fija a un sitio web con CSS
Introduce el CSS que hace que una barra de desplazamiento permanezca en tu sitio web. (Ciaran Griffin/Stockbyte/Getty Images)

El cuadro de texto en tu sitio web contiene una barra de desplazamiento en la parte inferior o lateral, que ayuda a los visitantes a ver toda la información en el interior del mismo. Al igual que con otros elementos de la página, este cuadro de desplazamiento desaparece de la vista cuando el visitante mueve la página Web hacia arriba o hacia abajo en una ventana del navegador. Puedes hacer que este elemento permanezca en su lugar con Cascading Style Sheets (en inglés) o CSS. Utiliza el software editor de texto de tu equipo para agregar el código CSS que pueda crear una barra de desplazamiento fija en tu sitio Web.

Nivel de dificultad:
Moderadamente difícil

Otras personas están leyendo

Instrucciones

  1. 1

    Abre tu software de editor de texto y abre el documento donde desees agregar una barra de desplazamiento fija.

  2. 2

    Escribe el siguiente código CSS antes de la etiqueta de cierre "</ head>":

    <style type="text/css"> div#fixed { } </style>

    La regla "div#fixed" gestiona el cuadro de texto con desplazamiento en la página.

  3. 3

    Escribe "position: fixed;" entre las llaves para especificar que no deseas que el cuadro de texto desaparezca cuando desplaces la página hacia arriba o hacia abajo. Escribe también "overflow: scroll;" para indicar que deseas que aparezca la barra de desplazamiento con tu cuadro de texto. Para ilustrar:

    div#fixed { position: fixed; overflow: scroll; }

  4. 4

    Escribe "Altura: ;" y "ancho: ;" e introduce valores numéricos en píxeles para establecer las dimensiones del cuadro de desplazamiento. El código CSS terminado ahora se ve así:

    <style type="text/css"> div#fixed { position: fixed; overflow: scroll; height: 150px; width: 300px; } </style>

  5. 5

    Escribe "<div id="fixed"> </ div>" en el área de la página donde desees que aparezca el cuadro. Escribe el contenido que muestra el interior del cuadro entre las etiquetas div, así:

    <div id="fixed"> <p>Este es el contenido en el interior de tu cuadro de texto con desplazamiento.</p> </div>

  6. 6

    Guarda el archivo. Haz una vista previa de la página en un navegador para ver la barra de desplazamiento fija.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles