Scroll spy navigation added

Arifshariar7 · Jan 5, 2014 · 60015ce · 60015ce
1 parent db0d195
commit 60015ce
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 14 deletions.
diff --git a/css/stylesheet.css b/css/stylesheet.css
@@ -519,5 +519,10 @@ footer a:hover {
 }
 
 .affix {
-    position: fixed;
+    width: 200px;
+    top: 20px;
+}
+
+.affix-top {
+    width: 200px;
 }
diff --git a/index.html b/index.html
@@ -26,7 +26,7 @@
     <title>jQuery Pagination plugin</title>
 </head>
 
-<body>
+<body data-spy="scroll" data-target="#navigation">
 <header>
     <div class="inner">
         <h1>jQuery Pagination plugin</h1>
@@ -42,7 +42,7 @@ <h2>Optimized for bootstrap</h2>
     <div class="inner clearfix">
         <section id="main-content">
             <h3>
-                <a name="intro" class="anchor" href="#intro"><span
+                <a id="intro" class="anchor" href="#intro"><span
                         class="octicon octicon-link"></span></a>Intro</h3>
 
             <p>This jQuery plugin simplifies the usage of Bootstrap Pagintion. It uses appropriate classes:
@@ -62,7 +62,7 @@ <h3>
             </p>
 
             <h3>
-                <a name="demo" class="anchor" href="#demo"><span
+                <a id="demo" class="anchor" href="#demo"><span
                         class="octicon octicon-link"></span></a>Demo</h3>
 
             <p>
@@ -87,7 +87,7 @@ <h3>
             <pre><code class="highlight">    &lt;<span class="nt">ul</span> <span class="na">id</span>=<span class="s">&quot;pagination-demo&quot;</span> <span class="na">class</span>=<span class="s">&quot;pagination-sm&quot;</span>&gt;&lt;/<span class="nt">ul</span>&gt;</code></pre>
 
             <h3>
-                <a name="options-and-events" class="anchor" href="#options-and-events"><span
+                <a id="options-and-events" class="anchor" href="#options-and-events"><span
                         class="octicon octicon-link"></span></a>Options and events</h3>
 
             <p>
@@ -116,7 +116,7 @@ <h3>
             </p>
 
             <h3>
-                <a name="examples" class="anchor" href="#examples"><span
+                <a id="examples" class="anchor" href="#examples"><span
                         class="octicon octicon-link"></span></a>Examples</h3>
 
             <h4>URL page link</h4>
@@ -131,14 +131,14 @@ <h4>URL page link</h4>
         </section>
 
         <aside id="sidebar">
-
-            <ul class="nav nav-pills nav-stacked">
-                <li><a href="#intro">Intro</a></li>
-                <li><a href="#demo">Demo</a>
-                <li><a href="#options-and-events">Options and events</a>
-                <li><a href="#examples">Examples</a>
-            </ul>
-
+            <div id="navigation">
+                <ul class="nav nav-pills nav-stacked">
+                    <li class="active"><a href="#intro">Intro</a></li>
+                    <li><a href="#demo">Demo</a>
+                    <li><a href="#options-and-events">Options and events</a>
+                    <li><a href="#examples">Examples</a>
+                </ul>
+            </div>
         </aside>
     </div>
 </div>

diff --git a/js/main.js b/js/main.js
@@ -6,5 +6,12 @@ $(document).ready(function () {
             $('#page-content').text('Page ' + page);
         }
     });
+
+    $('#navigation').affix({
+        offset: {
+            top: 200
+        }
+    });
+
 });