Cómo crear un scrollspy dinámico con PHP y MySQL

Hay veces que necesitamos que se haga scroll directamente a cierta sección de nuestra web. Por ejemplo, tenemos contenido sobre un tema diferente y queremos mostrar el contenido de ese tema en el scroll y resaltar dicho tema al ver contenido relacionado o mostrar contenido relacionado al hacer clic en el tema. Si estás desarrollando un proyecto utilizando Bootstrap o piensas en implementarlo en tu próximo proyecto, lo tienes muy fácil. El componente Scrollspy ya está disponible en Bootstrap y actualiza automáticamente la navegación o enumera los componentes del grupo según la posición del scroll para indicar qué enlace está activo actualmente en la pantalla. Por lo tanto, en este tutorial aprenderá cómo crear Bootstrap Scrollspy dinámico con PHP y MySQL.

Habiendo dicho esto, vamos a entrar en materia. La estructura de archivos para este ejemplo es la siguiente.

  • index.php
  • scrollspy.js

Crear la tabla en la base de datos

Para mostrar el menú de navegación y el contenido de la base de datos, primero hay que crear una tabla, a la cual llamaremos scrollspy, en la cual almacenaremos la información para después mostrarla...

CREATE TABLE `scrollspy` (
`id` int(11) NOT NULL,
`title` varchar(255) NOT NULL,
`description` text NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Obtener datos de la base de datos

Ahora obtendremos la información de nuestra base de datos, concretamente de la tabla scrollspy. Guardaremos todos los datos en un array, para después mostrar el título del menú y el contenido.

<?php
$sql = "SELECT id, title, description FROM scrollspy LIMIT 20";
$resultset = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));
$records = array();
while( $rows = mysqli_fetch_assoc($resultset) ) {
$records[] = $rows;
}
?>

Crear el scrollspy con Bootstrap utilizando contenido dinámico

Primero crearemos el menú de navegación HTML utilizando el array de PHP para mostrar el título de la página. Para implementar Scrollspy, debemos inicializar el ID del target para llamar a data-target, por lo que crearemos navbar_scrolspy para utilizarlo con data-target y crear el scrollspy.

<div id="navbar_scrollspy" class="navbar navbar-static">
<div class="navbar-inner">
<div class="container" style="width: auto;">
<a class="brand" href="#">PHPZAG</a>
<ul class="nav">
<?php
$count = 0;
foreach ($records as $record) {
$count++;
$class = '';
if($count == 1) {
$class = 'active';
}
echo "<li class='".$class."'><a href='#".$record['title']."'>".$record['title']."</a></li>";
}
?>
</ul>
</div>
</div>
</div>

Ahora definiremos el comportamiento del scrollspy para crear nuestro menú de navegación mediante el atributo data-spy=”scroll” y el data-target=”#navbar_scrollspy”. También necesitaremos añadir algo de CSS, como un position:relative; para que este elemento tenga el comportamiento de un scrollspy. Añadiremos el contenido HTML utilizando el array que hemos creado antes.

<div data-spy="scroll" data-target="#navbar_scrollspy" data-offset="50" class="scrollspy-nav">
<?php
foreach ($records as $data) {
echo "<h4 id='".$data['title']."'>".$data['title']."</h4>";
echo "<p>".$data['description']."</p>";
}
?>
</div>

Utilizar las funciones de scrollspy

También puedes utilizar las funciones de scrollspy y así definir el comportamiento de un scrollspy, sin necesidad de utilizar los data attribute. Para ello, debes utilizar la función .scrollspy() tal que así:

$('body').scrollspy({ target: '#navbar_scrollspy' })

Cuando utilizas scrollspy, añades y eliminas elementos del DOM, por lo que debes llamar al método refresh de este modo:

$('[data-spy="scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh')
})

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP