diff --git a/index.html b/index.html
index 2444793..89c508c 100644
--- a/index.html
+++ b/index.html
@@ -120,6 +120,7 @@ <h3>Contact me: <a href="/service/mailto:billdevcode@gmail.com"><i class="fa fa-envelope"
         <a href="https://github.com/billdevcode" target="_blank" alt="Github"><img src="https://github.com/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="https://github.com/src/index.js"></script>
     </body>
 
 </html>
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
new file mode 100644
index 0000000..17f1e67
--- /dev/null
+++ b/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;
+		}
+	});
+
+
+
+})
\ No newline at end of file
diff --git a/stylesheets/stylesheet.css b/stylesheets/stylesheet.css
index a41b86e..47f4d08 100644
--- a/stylesheets/stylesheet.css
+++ b/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');