From f5acd081f160bb64b236b6b98648775f9f2837d2 Mon Sep 17 00:00:00 2001 From: Brad Traversy Date: Tue, 17 Nov 2020 14:00:55 -0500 Subject: [PATCH] Sticky navbar --- sticky-navigation/index.html | 39 ++++++++++++ sticky-navigation/script.js | 10 +++ sticky-navigation/style.css | 117 +++++++++++++++++++++++++++++++++++ 3 files changed, 166 insertions(+) create mode 100644 sticky-navigation/index.html create mode 100644 sticky-navigation/script.js create mode 100644 sticky-navigation/style.css diff --git a/sticky-navigation/index.html b/sticky-navigation/index.html new file mode 100644 index 0000000..d793d0d --- /dev/null +++ b/sticky-navigation/index.html @@ -0,0 +1,39 @@ + + + + + + + Sticky Navigation + + + + +
+
+

Welcome To My Website

+

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores, consequuntur?

+
+
+ +
+

Content One

+

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ratione dolorem voluptates eveniet tempora ut cupiditate magnam, sapiente, hic quo in ipsum iste soluta eaque perferendis nihil recusandae dolore officia aperiam corporis similique. Facilis quos tempore labore totam! Consectetur molestiae iusto ducimus error reiciendis aspernatur dolor, modi dolorem sit architecto, voluptate magni sunt unde est quas? Voluptates a dolorum voluptatum quo perferendis aut sit. Aspernatur libero laboriosam ab eligendi omnis delectus earum labore, placeat officiis sint illum rem voluptas ipsum repellendus iste eius recusandae quae excepturi facere, iure rerum sequi? Illum velit delectus dicta et iste dolorum obcaecati minus odio eligendi!

+ +

Content Two

+

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Pariatur provident nostrum possimus inventore nisi laboriosam consequatur modi nulla eos, commodi, omnis distinctio! Maxime distinctio impedit provident, voluptates illo odio nostrum minima beatae similique a sint sapiente voluptatum atque optio illum est! Tenetur tempora doloremque quae iste aperiam hic cumque repellat?

+
+ + + + diff --git a/sticky-navigation/script.js b/sticky-navigation/script.js new file mode 100644 index 0000000..f7d2bd9 --- /dev/null +++ b/sticky-navigation/script.js @@ -0,0 +1,10 @@ +const nav = document.querySelector('.nav') +window.addEventListener('scroll', fixNav) + +function fixNav() { + if(window.scrollY > nav.offsetHeight + 150) { + nav.classList.add('active') + } else { + nav.classList.remove('active') + } +} \ No newline at end of file diff --git a/sticky-navigation/style.css b/sticky-navigation/style.css new file mode 100644 index 0000000..3fffd64 --- /dev/null +++ b/sticky-navigation/style.css @@ -0,0 +1,117 @@ +@import url('https://fonts.googleapis.com/css?family=Open+Sans'); + +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + font-family: 'Open Sans', sans-serif; + color: #222; + padding-bottom: 50px; +} + +.container { + max-width: 1200px; + margin: 0 auto; +} + +.nav { + position: fixed; + background-color: #222; + top: 0; + left: 0; + right: 0; + transition: all 0.3s ease-in-out; +} + +.nav .container { + display: flex; + justify-content: space-between; + align-items: center; + padding: 20px 0; + transition: all 0.3s ease-in-out; +} + +.nav ul { + display: flex; + list-style-type: none; + align-items: center; + justify-content: center; +} + +.nav a { + color: #fff; + text-decoration: none; + padding: 7px 15px; + transition: all 0.3s ease-in-out; +} + +.nav.active { + background-color: #fff; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); +} + +.nav.active a { + color: #000; +} + +.nav.active .container { + padding: 10px 0; +} + +.nav a.current, +.nav a:hover { + color: #c0392b; + font-weight: bold; +} + +.hero { + background-image: url('https://images.pexels.com/photos/450035/pexels-photo-450035.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'); + background-repeat: no-repeat; + background-size: cover; + background-position: bottom center; + height: 100vh; + color: #fff; + display: flex; + justify-content: center; + align-items: center; + text-align: center; + position: relative; + margin-bottom: 20px; + z-index: -2; +} + +.hero::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + z-index: -1; +} + +.hero h1 { + font-size: 46px; + margin: -20px 0 20px; +} + +.hero p { + font-size: 20px; + letter-spacing: 1px; +} + +.content h2, +.content h3 { + font-size: 150%; + margin: 20px 0; +} + +.content p { + color: #555; + line-height: 30px; + letter-spacing: 1.2px; +}