106 lines
4.1 KiB
HTML
106 lines
4.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta http-equiv="X-UA-COMPATIBLE" content="IE=Edge" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Bootstrap Plugins</title>
|
|
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/>
|
|
<!--[if lt IE 9]>
|
|
<script src="../js/html5shiv.3-7-0.js"></script>
|
|
<script src="../js/respond.1-4-2.min.js"></script>
|
|
<![endif]-->
|
|
|
|
<style type="text/css">
|
|
.scrollspy-example {
|
|
position: relative;
|
|
height: 200px;
|
|
margin-top: 10px;
|
|
overflow: auto;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<div id="navbarExample" class="navbar navbar-default" role="navigation">
|
|
<div class="container-fluid">
|
|
<div class="navbar-header">
|
|
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbarLinks">
|
|
<span class="icon-bar">A</span>
|
|
<span class="icon-bar">B</span>
|
|
<span class="icon-bar">C</span>
|
|
</button>
|
|
<a class="navbar-brand" href="#">SitePoint</a>
|
|
</div>
|
|
|
|
<div class="collapse navbar-collapse navbarLinks">
|
|
<ul class="nav navbar-nav">
|
|
<li class="active"><a href="#home">Home</a></li>
|
|
<li class=""><a href="#about">About</a></li>
|
|
<li class=""><a href="#contact">Contact Us</a></li>
|
|
<li class=""><a href="#map">Map</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div data-spy="scroll" data-target="#navbarExample" data-offset="0" class="scrollspy-example">
|
|
<h4 id="home">Home</h4>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
|
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
|
|
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
|
|
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
|
|
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
|
|
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
|
|
est laborum</p>
|
|
|
|
<h4 id="about">About</h4>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
|
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
|
|
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
|
|
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
|
|
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
|
|
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
|
|
est laborum</p>
|
|
|
|
<h4 id="contact">Contact us</h4>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
|
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
|
|
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
|
|
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
|
|
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
|
|
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
|
|
est laborum</p>
|
|
|
|
<h4 id="map">Map</h4>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
|
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
|
|
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
|
|
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
|
|
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
|
|
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
|
|
est laborum</p>
|
|
</div>
|
|
|
|
<!-- https://ajax.googleapis.com/ajax/libs/jquery/1.11.1.jquery.min.js -->
|
|
<script src="../js/jquery-1.11.2.min.js"></script>
|
|
<script src="../js/bootstrap.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
/*
|
|
$(".scrollspy-example").scrollspy({
|
|
'target' : '#navbarExample'
|
|
});
|
|
$(".scrollspy-example").scrollspy('refresh');
|
|
*/
|
|
|
|
$('#navbarExample').on('activate.bs.scrollspy', function () {
|
|
console.log('New link highlighted', this.id);
|
|
});
|
|
|
|
</script>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|