Merge branch 'main' into Nthaz-Simple-contribution

README.md

@@ -6,7 +6,7 @@
 
 ## Introduction
 
-Hey there! Welcome to the Simple Contribution repo. This is a very simple web project to help first-time contributors easily participate and contribute to open source projects and also get more comfortable in using GitHub. Who knows - our "simple" contribution may become something amazing!
+Hey there! :wave: Welcome to the Simple Contribution repo. This is a very simple web project to help first-time contributors easily participate and contribute to open source projects and also get more comfortable in using GitHub. Who knows - our "simple" contribution may become something amazing!
 
 ### Who can contribute?
 
@@ -16,9 +16,9 @@ This is intended for complete beginners and also for those with a little more ex
 
 ### How and what do I contribute?
 
-It's simple, open up the **cardDetails.json** file and add your details to it, you can easily copy any one of the JSON objects and customize it with your own information. To contribute, read the [Contribution guide](contribution.md) to get an explicit guide on the whole process of contributing starting from setting up Github to creating a pull request. If you're an advanced developer and you want to take it up a notch, read the [Advanced Contribution guide](advanced-contribution.md) to get started.
+It's simple, open up the **cardDetails.json** file and add your details to it, you can easily copy any one of the JSON objects and customize it with your own information. To contribute, read the **[Contribution guide](contribution.md)** to get an explicit guide on the whole process of contributing starting from setting up Github to creating a pull request. If you're an advanced developer and you want to take it up a notch, read the **[Advanced Contribution guide](advanced-contribution.md) to get started**.
 
-Once your pull request is merged, the changes will be live on [simple-contribution](https://amyyalex.github.io/simple-contribution/). If you appreciate this amazing project, kindly leave a ⭐ by clicking on the star button on the top right.
+Once your pull request is merged, the changes will be live on **[simple-contribution](https://amyyalex.github.io/simple-contribution/)**. If you appreciate this amazing project, kindly leave a ⭐ by clicking on the star button on the top right.
 Thank you!
 
 <h2>🤝 Contributors</h2>

app.js

@@ -1,3 +1,28 @@
+window.addEventListener('DOMContentLoaded', () => {
+  let scrollPos = 0;
+  const mainNav = document.getElementById('navbar');
+  const headerHeight = mainNav.clientHeight;
+  window.addEventListener('scroll', function() {
+      const currentTop = document.body.getBoundingClientRect().top * -1;
+      if ( currentTop < scrollPos) {
+          // Scrolling Up
+          if (currentTop > 0 && mainNav.classList.contains('is-fixed')) {
+              mainNav.classList.add('is-visible');
+          } else {
+              console.log(123);
+              mainNav.classList.remove('is-visible', 'is-fixed');
+          }
+      } else {
+          // Scrolling Down
+          mainNav.classList.remove(['is-visible']);
+          if (currentTop > headerHeight && !mainNav.classList.contains('is-fixed')) {
+              mainNav.classList.add('is-fixed');
+          }
+      }
+      scrollPos = currentTop;
+  });
+})
+
 // initialization of cardDetailsArray
 let cardDetailsArray;
 const cardsPerPage = 10;