Merge pull request commons-app#34 from soulspark666/master

sivaraam · web-flow · commit ee3069857886 · 2019-03-31T17:28:44.000Z
Resolved Issue commons-app#33
diff --git a/index.html b/index.html
@@ -10,7 +10,7 @@
 </head>
 
 <body>
-    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
+    <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-primary">
         <div class="container">
             <span class="navbar-brand mb-0 h1">Commons Mobile App</span>
             <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
@@ -19,11 +19,11 @@
 
             <div class="collapse navbar-collapse" id="navbarSupportedContent">
                 <ul class="navbar-nav mr-auto">
-                    <li class="nav-item"><a class="nav-link" href="#description">About</a></li>
-                    <li class="nav-item"><a class="nav-link" href="#community">Community</a></li>
-                    <li class="nav-item"><a class="nav-link" href="#features">Features</a></li>
-                    <li class="nav-item"><a class="nav-link" href="#usage">Usage</a></li>
-                    <li class="nav-item"><a class="nav-link" href="#photo-guide">Photo Guidelines</a></li>
+                    <li class="nav-item"><a class="nav-link scroll" href="#description">About</a></li>
+                    <li class="nav-item"><a class="nav-link scroll" href="#community">Community</a></li>
+                    <li class="nav-item"><a class="nav-link scroll" href="#features">Features</a></li>
+                    <li class="nav-item"><a class="nav-link scroll" href="#usage">Usage</a></li>
+                    <li class="nav-item"><a class="nav-link scroll" href="#photo-guide">Photo Guidelines</a></li>
                 </ul>
             </div> <!-- .collapse -->
         </div> <!-- .container -->
@@ -166,8 +166,10 @@ <h2>Commons Mobile App</h2>
         </div>
     </footer>
 
-    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
+
+    <script  src="js/index.js"></script>
 </body>
 </html>
diff --git a/js/index.js b/js/index.js
@@ -0,0 +1,33 @@
+$(document).ready(function() {
+
+  var scrollLink = $('.scroll');
+
+  // Smooth scrolling
+  scrollLink.click(function(e) {
+    e.preventDefault();
+    $('body,html').animate({
+      scrollTop: $(this.hash).offset().top
+    }, 1000 );
+  });
+
+  // Active link switching
+  $(window).scroll(function() {
+    var scrollbarLocation = $(this).scrollTop();
+
+    scrollLink.each(function() {
+
+      var sectionOffset = $(this.hash).offset().top - 20;
+
+      if ( sectionOffset <= scrollbarLocation ) {
+        $(this).parent().addClass('active');
+        $(this).parent().siblings().removeClass('active');
+      }
+    })
+  })
+
+  // Auto close navbar on clicking a link in it
+  // Ref: https://stackoverflow.com/a/14250000/5614968
+  $('.navbar-collapse a').click(function() {
+    $(".navbar-collapse").collapse('hide');
+  });
+})
diff --git a/style.css b/style.css
@@ -2,6 +2,7 @@
 
 body {
     text-align: center;
+    padding-top: 50px;
 }
 
 .bg-primary {

Original file line number	Diff line number	Diff line change
`@@ -2,6 +2,7 @@`
`2`	`2`
`3`	`3`	`body {`
`4`	`4`	`text-align: center;`
	`5`	`+ padding-top: 50px;`
`5`	`6`	`}`
`6`	`7`
`7`	`8`	`.bg-primary {`