From dda73734b14154e48191c257ac41bdf0a06fa139 Mon Sep 17 00:00:00 2001
From: Brian Canini <canini.16@osu.edu>
Date: Mon, 4 Jan 2021 14:48:35 -0500
Subject: [PATCH] adding js and styles for sticky nav
---
.../assets/sass/components/_menu.scss | 21 +++-
web/themes/asc_bootstrap/css/style.css | 109 ++++++++++--------
web/themes/asc_bootstrap/js/scripts.js | 18 +++
3 files changed, 100 insertions(+), 48 deletions(-)
diff --git a/web/themes/asc_bootstrap/assets/sass/components/_menu.scss b/web/themes/asc_bootstrap/assets/sass/components/_menu.scss
index 65714f74a0..c5dcb9426a 100644
--- a/web/themes/asc_bootstrap/assets/sass/components/_menu.scss
+++ b/web/themes/asc_bootstrap/assets/sass/components/_menu.scss
@@ -4,7 +4,8 @@
#main-nav {
background-color: #373535;
- position: relative;
+ position: -webkit-sticky;
+ position: sticky;
z-index: 50;
}
@@ -173,6 +174,24 @@
+// --------------------------------------------------
+
+//## Sticky Nav.
+
+/* The sticky class is added to the navbar with JS when it reaches its scroll position */
+.sticky {
+ position: fixed;
+ top: 0;
+ width: 100%;
+}
+
+/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
+.sticky + .content {
+ padding-top: 60px;
+}
+
+
+
// --------------------------------------------------
//## Mobile styles.
diff --git a/web/themes/asc_bootstrap/css/style.css b/web/themes/asc_bootstrap/css/style.css
index a8e1f0c0b1..2de683121e 100644
--- a/web/themes/asc_bootstrap/css/style.css
+++ b/web/themes/asc_bootstrap/css/style.css
@@ -11560,27 +11560,28 @@ article .field--name-body {
/* line 5, ../assets/sass/components/_menu.scss */
#main-nav {
background-color: #373535;
- position: relative;
+ position: -webkit-sticky;
+ position: sticky;
z-index: 50;
}
-/* line 11, ../assets/sass/components/_menu.scss */
+/* line 12, ../assets/sass/components/_menu.scss */
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
background: transparent;
color: #333333;
}
-/* line 16, ../assets/sass/components/_menu.scss */
+/* line 17, ../assets/sass/components/_menu.scss */
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
background-color: transparent;
}
-/* line 20, ../assets/sass/components/_menu.scss */
+/* line 21, ../assets/sass/components/_menu.scss */
.dropdown-submenu.pull-left {
float: none;
}
-/* line 24, ../assets/sass/components/_menu.scss */
+/* line 25, ../assets/sass/components/_menu.scss */
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
@@ -11590,51 +11591,51 @@ article .field--name-body {
border-radius: 6px 0 6px 6px;
}
-/* line 30, ../assets/sass/components/_menu.scss */
+/* line 31, ../assets/sass/components/_menu.scss */
.navbar-nav li:last-child > .dropdown-menu .dropdown-submenu > a:after {
float: left;
content: "\e079";
}
-/* line 34, ../assets/sass/components/_menu.scss */
+/* line 35, ../assets/sass/components/_menu.scss */
.navbar-nav li:last-child > .dropdown-menu .dropdown-submenu > .dropdown-menu {
left: -100%;
}
-/* line 40, ../assets/sass/components/_menu.scss */
+/* line 41, ../assets/sass/components/_menu.scss */
#superfish-main.sf-style-white {
margin-bottom: 0;
}
-/* line 43, ../assets/sass/components/_menu.scss */
+/* line 44, ../assets/sass/components/_menu.scss */
#superfish-main.sf-style-white a {
text-transform: uppercase;
color: #ffffff;
text-decoration: none;
font-weight: 400;
}
-/* line 49, ../assets/sass/components/_menu.scss */
+/* line 50, ../assets/sass/components/_menu.scss */
#superfish-main.sf-style-white a:hover {
background: rgba(216, 216, 216, 0.25);
}
-/* line 54, ../assets/sass/components/_menu.scss */
+/* line 55, ../assets/sass/components/_menu.scss */
#superfish-main.sf-style-white li {
background: transparent;
}
-/* line 57, ../assets/sass/components/_menu.scss */
+/* line 58, ../assets/sass/components/_menu.scss */
#superfish-main.sf-style-white li ul {
background: #E0E0E0;
}
-/* line 60, ../assets/sass/components/_menu.scss */
+/* line 61, ../assets/sass/components/_menu.scss */
#superfish-main.sf-style-white li ul a {
color: #4A4A4A;
text-transform: capitalize;
}
-/* line 64, ../assets/sass/components/_menu.scss */
+/* line 65, ../assets/sass/components/_menu.scss */
#superfish-main.sf-style-white li ul a:hover {
background: #BB0000;
color: #ffffff;
}
-/* line 72, ../assets/sass/components/_menu.scss */
+/* line 73, ../assets/sass/components/_menu.scss */
#superfish-main.sf-style-white .sfHover a.sf-depth-1:after {
content: '';
position: absolute;
@@ -11646,20 +11647,20 @@ article .field--name-body {
border-right: 8px solid transparent;
z-index: 400;
}
-/* line 85, ../assets/sass/components/_menu.scss */
+/* line 86, ../assets/sass/components/_menu.scss */
#superfish-main.sf-style-white a.sf-depth-1 svg, #superfish-main.sf-style-white a.sf-depth-1 i {
display: none;
}
-/* line 90, ../assets/sass/components/_menu.scss */
+/* line 91, ../assets/sass/components/_menu.scss */
#superfish-main.sf-style-white a.sf-with-ul {
padding: 0.75em 1em;
}
-/* line 94, ../assets/sass/components/_menu.scss */
+/* line 95, ../assets/sass/components/_menu.scss */
#superfish-main.sf-style-white svg, #superfish-main.sf-style-white i {
float: right;
}
-/* line 99, ../assets/sass/components/_menu.scss */
+/* line 100, ../assets/sass/components/_menu.scss */
.search-box {
background: #E8E8E4;
position: absolute;
@@ -11672,7 +11673,7 @@ article .field--name-body {
border-top: 4px solid #D80B15;
display: none;
}
-/* line 111, ../assets/sass/components/_menu.scss */
+/* line 112, ../assets/sass/components/_menu.scss */
.search-box:before {
content: "";
position: absolute;
@@ -11683,7 +11684,7 @@ article .field--name-body {
border-top: 14px solid transparent;
border-bottom: 14px solid #D80B15;
}
-/* line 122, ../assets/sass/components/_menu.scss */
+/* line 123, ../assets/sass/components/_menu.scss */
.search-box input[type="text"] {
width: 200px;
padding: 5px 10px;
@@ -11691,7 +11692,7 @@ article .field--name-body {
border: 1px solid #D80B15;
outline: none;
}
-/* line 130, ../assets/sass/components/_menu.scss */
+/* line 131, ../assets/sass/components/_menu.scss */
.search-box input[type="button"] {
width: 80px;
padding: 5px 0;
@@ -11703,22 +11704,22 @@ article .field--name-body {
cursor: pointer;
}
-/* line 142, ../assets/sass/components/_menu.scss */
+/* line 143, ../assets/sass/components/_menu.scss */
#superfish-main {
width: 95%;
}
-/* line 146, ../assets/sass/components/_menu.scss */
+/* line 147, ../assets/sass/components/_menu.scss */
#superfish-main.sf-style-white a:focus {
color: #373535;
}
-/* line 149, ../assets/sass/components/_menu.scss */
+/* line 150, ../assets/sass/components/_menu.scss */
#superfish-main.sf-style-white a:hover {
color: #ffffff;
}
-/* line 159, ../assets/sass/components/_menu.scss */
+/* line 160, ../assets/sass/components/_menu.scss */
#main-nav-menubar-instructions {
background-color: rgba(0, 0, 0, 0.9);
position: absolute;
@@ -11729,118 +11730,132 @@ article .field--name-body {
display: none;
width: 450px;
}
-/* line 169, ../assets/sass/components/_menu.scss */
+/* line 170, ../assets/sass/components/_menu.scss */
#main-nav-menubar-instructions p {
color: #ffffff;
}
+/* The sticky class is added to the navbar with JS when it reaches its scroll position */
+/* line 182, ../assets/sass/components/_menu.scss */
+.sticky {
+ position: fixed;
+ top: 0;
+ width: 100%;
+}
+
+/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
+/* line 189, ../assets/sass/components/_menu.scss */
+.sticky + .content {
+ padding-top: 60px;
+}
+
@media (max-width: 768px) {
- /* line 182, ../assets/sass/components/_menu.scss */
+ /* line 201, ../assets/sass/components/_menu.scss */
#main-nav .container {
padding-left: 0;
padding-right: 0;
}
- /* line 186, ../assets/sass/components/_menu.scss */
+ /* line 205, ../assets/sass/components/_menu.scss */
#main-nav .container:after {
content: "";
display: none;
}
- /* line 190, ../assets/sass/components/_menu.scss */
+ /* line 209, ../assets/sass/components/_menu.scss */
#main-nav .container .clearfix:after {
content: "";
display: none;
}
- /* line 196, ../assets/sass/components/_menu.scss */
+ /* line 215, ../assets/sass/components/_menu.scss */
div.sf-accordion-toggle.sf-style-white > a:after {
content: "";
display: none;
}
- /* line 200, ../assets/sass/components/_menu.scss */
+ /* line 219, ../assets/sass/components/_menu.scss */
ul.sf-menu.sf-accordion.sf-accordion-with-buttons li.sf-expanded > .sf-accordion-button:after {
content: "";
display: none;
}
- /* line 205, ../assets/sass/components/_menu.scss */
+ /* line 224, ../assets/sass/components/_menu.scss */
#block-dummyheader img {
width: 100%;
}
- /* line 209, ../assets/sass/components/_menu.scss */
+ /* line 228, ../assets/sass/components/_menu.scss */
div.sf-accordion-toggle.sf-style-white a {
background: transparent;
border: none;
font-size: 30px;
}
- /* line 214, ../assets/sass/components/_menu.scss */
+ /* line 233, ../assets/sass/components/_menu.scss */
div.sf-accordion-toggle.sf-style-white a span {
display: none;
}
- /* line 219, ../assets/sass/components/_menu.scss */
+ /* line 238, ../assets/sass/components/_menu.scss */
div.sf-accordion-toggle.sf-style-white a.sf-expanded {
background: transparent;
}
- /* line 223, ../assets/sass/components/_menu.scss */
+ /* line 242, ../assets/sass/components/_menu.scss */
ul.sf-menu.sf-accordion.sf-accordion-with-buttons .sf-accordion-button:after {
content: "";
margin: 0;
}
- /* line 228, ../assets/sass/components/_menu.scss */
+ /* line 247, ../assets/sass/components/_menu.scss */
ul.sf-menu.sf-style-white.sf-accordion li.sf-expanded {
background: #F5F5F5;
}
- /* line 232, ../assets/sass/components/_menu.scss */
+ /* line 251, ../assets/sass/components/_menu.scss */
ul.sf-menu.sf-style-white li, ul.sf-menu.sf-style-white.sf-navbar {
border: solid 1px #979797;
}
- /* line 236, ../assets/sass/components/_menu.scss */
+ /* line 255, ../assets/sass/components/_menu.scss */
ul.sf-menu.sf-style-white.sf-accordion li li a, ul.sf-menu.sf-style-white.sf-accordion li li span.nolink {
background: #E0E0E0;
}
- /* line 240, ../assets/sass/components/_menu.scss */
+ /* line 259, ../assets/sass/components/_menu.scss */
ul.sf-menu.sf-style-white a, ul.sf-menu.sf-style-white a:visited, ul.sf-menu.sf-style-white span.nolink {
color: #373735;
}
- /* line 245, ../assets/sass/components/_menu.scss */
+ /* line 264, ../assets/sass/components/_menu.scss */
.sf-menu .sf-depth-1 a {
text-transform: uppercase;
font-weight: 600;
font-size: 18px;
}
- /* line 251, ../assets/sass/components/_menu.scss */
+ /* line 270, ../assets/sass/components/_menu.scss */
.sf-menu .sf-depth-2 a {
text-transform: capitalize;
font-weight: 400;
}
- /* line 256, ../assets/sass/components/_menu.scss */
+ /* line 275, ../assets/sass/components/_menu.scss */
.sf-menu .hidetxt {
position: absolute;
left: -99999999px;
width: 0;
height: 0;
}
- /* line 263, ../assets/sass/components/_menu.scss */
+ /* line 282, ../assets/sass/components/_menu.scss */
.sf-menu .sf-accordion-button {
padding: 5px 15px 0;
border-left: solid 1px #979797 !important;
background: #E0E0E0 !important;
}
- /* line 268, ../assets/sass/components/_menu.scss */
+ /* line 287, ../assets/sass/components/_menu.scss */
.sf-menu .sf-accordion-button svg, .sf-menu .sf-accordion-button i {
font-size: 18px;
color: #BB0000;
}
- /* line 275, ../assets/sass/components/_menu.scss */
+ /* line 294, ../assets/sass/components/_menu.scss */
div.sf-accordion-toggle.sf-style-white a {
padding: .05em .5em;
}
diff --git a/web/themes/asc_bootstrap/js/scripts.js b/web/themes/asc_bootstrap/js/scripts.js
index 00b6ed699b..0d840471f6 100644
--- a/web/themes/asc_bootstrap/js/scripts.js
+++ b/web/themes/asc_bootstrap/js/scripts.js
@@ -228,3 +228,21 @@ jQuery(document).ready(function(){
// var test = new a11yNavbar('main-nav', options);
// });
+
+// When the user scrolls the page, execute myFunction
+window.onscroll = function() {myFunction()};
+
+// Get the navbar
+var navbar = document.getElementById("main-nav");
+
+// Get the offset position of the navbar
+var sticky = navbar.offsetTop;
+
+// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
+function myFunction() {
+ if (window.pageYOffset >= sticky) {
+ navbar.classList.add("sticky")
+ } else {
+ navbar.classList.remove("sticky");
+ }
+}
--
GitLab