|
|
@@ -0,0 +1,106 @@
|
|
|
+<!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>
|
