Fix navbar with affix and scrollby

leocaseiro · leocaseiro · commit f7a99064e39d · 2015-09-07T18:39:50.000+10:00
diff --git a/samples.html b/samples.html
@@ -57,7 +57,8 @@
         bottom: -2px;
     }
     .nav-tabs>li.active a,
-    .nav-tabs>li.active a:focus {
+    .nav-tabs>li.active a:focus,
+    .nav>li.active>a{
         background-color: #f5f5f5;
         height: 44px;
     }
@@ -70,8 +71,8 @@
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
     <![endif]-->
 </head>
-<body>
-<div class="jumbotron sts-jumbotron text-center">
+<body data-spy="scroll" data-target=".scrollspy">
+<div class="jumbotron sts-jumbotron text-center" id="top">
     <div class="container">
         <h1 class="sts-title"><i class="fa fa-exchange"></i> jQuery StringToSlug</h1>
         <p class="sts-subtitle">Convert any string into slugs and bind using jQuery</p>
@@ -558,7 +559,7 @@ <h2 class="page-header">AND</h2>
                 </div><!-- panel -->
             </section>
 
-            <section class="sts-section" id="js-options">
+            <section class="sts-section" id="js-options-options">
                 <h2 class="page-header">options</h2>
                 <p>Use <strong>options</strong> to customize <strong><a href="http://pid.github.io/speakingurl/">SpeakinURL</a></strong>.</p>
                 <div class="panel panel-default">
@@ -648,16 +649,20 @@ <h2 class="page-header">callback</h2>
             </section>
         </div>
         <div class="col-sm-3 scrollspy">
-            <nav class="hidden-print hidden-xs hidden-sm affix-top" data-spy="affix">
+            <nav class="hidden-print hidden-xs hidden-sm" data-spy="affix">
                 <ul class="nav">
                     <li><a href="#js-getting-started">Getting Started</a></li>
                     <li><a href="#js-basic-usage">Basic Usage</a></li>
-                    <li><a href="#js-options">Options</a>
-                    <ul class="nav">
-                        <li><a href="#js-setevents">setEvents</a></li>
-                        <li><a href="#js-getput">getPut</a></li>
-                    </ul>
-                    </li>
+                    <li><a href="#js-options">Options</a></li>
+                    <li><a href="#js-setevents">Options: setEvents</a></li>
+                    <li><a href="#js-getput">Options: getPut</a></li>
+                    <li><a href="#js-space">Options: space</a></li>
+                    <li><a href="#js-prefix">Options: prefix</a></li>
+                    <li><a href="#js-suffix">Options: suffix</a></li>
+                    <li><a href="#js-replace">Options: replace</a></li>
+                    <li><a href="#js-and">Options: AND</a></li>
+                    <li><a href="#js-options-options">Options: options</a></li>
+                    <li><a href="#js-callback">Options: callback</a></li>
                 </ul>
                 <a class="back-to-top" href="#top">
                     Back to top
@@ -735,9 +740,10 @@ <h2 class="page-header">callback</h2>
 
             $('[data-spy="affix"]').affix({
                 offset: {
-                    top: $('[data-spy="affix"]').offset().top
+                    top: $('[data-spy="affix"]').offset().top,
+                    bottom: 120
                 }
-            });
+            } ).css('top','0');
         });
     </script>
 </body>
