From 2639ffdb46123856ee4ae7719fcf08b93e7c3218 Mon Sep 17 00:00:00 2001 From: billdevcode Date: Wed, 21 Sep 2016 16:40:06 -0700 Subject: [PATCH] Add navbar animation --- index.html | 1 + src/index.js | 19 +++++++++++++++++++ stylesheets/stylesheet.css | 9 +++++++++ 3 files changed, 29 insertions(+) create mode 100644 src/index.js diff --git a/index.html b/index.html index 2444793..89c508c 100644 --- a/index.html +++ b/index.html @@ -120,6 +120,7 @@

Contact me: + \ 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');