Create Dynamic Bootstrap Scrollspy with PHP & MySQL

Sometimes we need functionality to target certain section of the page on scroll position. For example we have content on different topic and wants to show that topic content on scroll and highlight that topic when viewing related content or display topic related content when click topic. If you’re developing project using Bootstrap and thinking about implementing same in your next project then its very easy. The Scrollspy component already available in Bootstrap that’s automatically update navigation or list group components based on scroll position to indicate which link is currently active in the viewport. You just need to use this with Bootstrap nav component or list group.

So in this tutorial you will learn how to create dynamic Bootstrap Scrollspy with PHP and MySQL. The tutorial explained in easy steps with live demo to load content dynamically from MySQL database and created Bootstrap Scrollspy. You can also download source code of live demo.

Also, read:

As we have covered this tutorial with live demo to create dynamic Bootstrap Scrollspy with PHP and MySQL, so the file structure for this example is following.

index.php
scrollspy.js

Steps1: Create Database Table
As we will display navigation and content from MySQL database table, so first we will create MySQL database table scrollspy to store pages details and display it.

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

Steps2: Get Data From MySQL Database Table
Now we will get data from MySQL database table scrollspy and store in an array to display navigation title and content.

<?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;
}		
?>

Steps3: Create Bootstrap Scrollspy using Dynamic Content
First we will create navigation HTML using PHP array to display page title. To implement Scrollspy, we need to initialize target id to call with data-target, so created id navbar_scrollspy to use with data-target to create 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>

Now we will create scrollspy behavior to created navigation by using data attribute data-spy=”scroll” and data target data-target=”#navbar_scrollspy”. We also need to add CSS position: relative; to this element to add scrollspy behavior. We will create content HTML using PHP array with pages ids.

<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>

Steps4: Use Scrollspy Functions

You can also use Scrollspy functions to create scrollspy behavior without using data attribute. For this, you need to use function .scrollspy() like below.

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

When using scrollspy, you’re adding or removing elements from the DOM, then you’ll need to call the refresh method like below:

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

Latest Tutorials

Popular Tags