Add navbar animation

index.html

@@ -120,6 +120,7 @@ <h3>Contact me: <a href="mailto:[email protected]"><i class="fa fa-envelope"
         <a href="https://github.com/billdevcode" target="_blank" alt="Github"><img src="imgs/github-icon.png" width="50" height="50" class="img-circle"></a>
       </div>
       <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
+      <script src="src/index.js"></script>
     </body>
 
 </html>

src/index.js

@@ -0,0 +1,19 @@
+$(document).ready(function() {
+
+	$(window).on("scroll", function() {
+		var scrollHeight = $(document).height();
+		var scrollPosition = $(window).height() + $(window).scrollTop();
+		var checkPosition = false;
+
+		if (scrollPosition >= 1520 && !checkPosition) {
+			$("#navbar").css("background-color", "#222");
+			checkPosition = true;
+		} else if (scrollPosition < 1520) {
+			$("#navbar").css("background-color", "transparent");
+			checkPosition = false;
+		}
+	});
+
+
+
+})

stylesheets/stylesheet.css

@@ -3,6 +3,9 @@ html, body {
   overflow-x: hidden !important;
 }
 
+#navbar {
+  background-color: transparent;
+}
 .navbar-header .navbar {
   text-decoration: none;
   max-width: 100%;
@@ -12,6 +15,12 @@ html, body {
   font-family: 'open sans';
 }
 
+#navbar {
+  background-color: transparent;
+  -webkit-transition: all 0.8s ease;
+  transition: all 0.8s ease;
+}
+
 .home {
   height: 650px;
   background-image: url(https://github.com/'../imgs/bg1.jpg');